首页 > 作文

CSS3等相关属性制作分页导航实现代码

更新时间:2023-04-03 16:07:15 阅读: 评论:0

w3cplus第二版本刚上线时,好多位朋友向我问起站上的分页导航样式是怎么制作,像是图片一样。前面都是随便说了一下制作的过程,为了报答各位朋友一持对本站的大力支持,今天我特意把这个分页导航的效果当作一个小教程来说。希望大家会喜欢。

目标

今天我们主要的目的是使用css3等相关属性来制作w3cplus站点上的分页导航效果,大家可以这点击这里查看站点上的效果,也可以直击下面的效果图:

在这个效果中,其实只有两大看点

使用css3的属性,制作不规则图形效果,并且hover状态下会慢慢改变图形和字体颜色;让列表水平居中,这个效果我曾多次碰到同学问怎么使用一个列表居中显示,并且排在一行,列表还要自适应内容的宽度。看起来复杂,其实不难,这也是我下面要重点介绍的一个小技巧。

html markup

有想做东西,我们就需要有材料,我这里所说的材料就是我们分页导航的html markup,下面我们一起来看看吧:

复制代码 代码如下:

<ul class=”pager” >

<li class=”pager-first first” >

<a class=”active” title=”到第一页” href=”/css3″ >« 首页 </a>

</li>

<li class=”pager-previous” >

<a class=”active” title=”返回上一个页面” href=”/css3?page=2″ >‹ 上一页 </a>

</li>

<li class=”pager-item” >

<a class=”active” title=”到第 1 页” href=”/css3″ >1</a>

</li>

<li class=”pager-item” >

<a class=̶秘书职责1;active” title=”到第 2 页” href=”/css3?page=1″ >2</a>

</li>

<li class=”pager-item” >

<a class=”active” title=”到第 3 页” href=”/css3?page=2″ >3</a>

</li>

<li class=”pager-current” >4</li>

<li class=”pager-item” >

<a class=”active” title=”到第 5 页” href=”/css3?page=4″ >5</a>

</li>

<li class=”pager-item” >

<a class=”active” title=”到第 6 页” href=”/css3?page=5″ >6</a>

</li>

<li class=”pager-next” >

<a class=”active” title=”去下一个页面” href=”/css3?page=4″ >下一页 › </a>

</li>

<li class=”pager-last la陈伟霆奔跑吧st” >

<a class=”active” title=”到最后一页” href=”/css3?page=5″ >尾页 » </a>

</li>

</ul>

这样的结构是我常用来制作分页导航的结构,当然大家还有其他的不同结构,今天我们就不去探讨这方面的问题。其实这个结构很简单,我们把每一页的序号放在了一个“<a>”中,然后对应放在列表项中。唯一需要注意的一点就是“当前页”,因为所处当前页是不需要有具有点击效果,所以我直接将当前页放在一个“li”中,并且命名一个“pager-current”的类名给他,大家可以从firebug的截图中来看这样的区别:

css code

有了结构,就需要用css来美化他:

复制代码 代码如下:

body {

font:12px/162% tahoma,arial,helvetica,”simsun”,”arial narrow”,geneva,sans-rif;

}

.pager {

list-style: none outside none;

margin: 20px;

padding: 0;

text-align: center;

}

.pager li {

display: inline-block;

margin: 0;

padding: 0;

}

* html .pager li { display: inline; }

*+html .pager li { display: inline; }

.pager li.pager-current,

.pager li a {

-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

background: #232b30; /* old browrs */

background: -moz-linear-gradient(top, #3d4850 3%, #313d45 4%, #232b30 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3d4850), color-stop(4%,#313d45), color-stop(100%,#232b30)); /* webkit */

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#3d4850′, endcolorstr=’#232b30′,gradienttype=0 ); /* ie */

-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* firefox */

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* safari, chrome */

box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* css3 */

color: #ffffff;

font-size: 12px;

margin-left: 10px;

padding: 3px 12px;

-webkit-transition: all 0.5s ea-in 0s;

-moz-transition: all 0.5s ea-in 0s;

-o-transition: all 0.5s ea-in 0s;

transition: all 0.5s ea-in 0s;

text-decoration: none;

zoom:1;

}

.pager li.pager-current {

-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

color: #d54e21;

font-weight: bold;

}

.pager li a:hover {

-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

background: #4c5a64; /* old browrs */

background: -moz-linear-gradient(top, #4c5a64 3%, #404f5a 4%, #2e3940 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4c5a64), color-stop(4%,#404f5a), color-stop(100%,#2e3940)); /* webkit */

filter: progid:dximaget春节的歌曲ransform.microsoft.gradient( startcolorstr=’#4c5a64′, endcolorstr=’#2e3940′,gradienttype=0 ); /* ie */

color: #d54e21;

}

上面是demo效果所使用的css代码,下面我们一起来细看一下上面的代码:

1、不规则图形

我在此处主要使用css3的border-readius属性制作的不规则圆角效果:

复制代码 代码如下:

.pager li a

-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

}

有关于其详细介绍,大家可以点击《css3的圆角border-radius》。上面是默认状态下的效果,那么在hover下改变图形样式,我想大家都想到了,是的那就是在“:hover”下改变其风格:

复制代码 代码如下:

.pager li a:hover {

-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

}

2、背景色

通过第一步,我们只制作出来不规则的边界效果,需要在上面的基础上加上背景色,这样填充进行就形成了不规则的图形,类似于图片效果。这里填充颜色,使用的是css3的渐变属性——gradient来实现的:

复制代码 代码如下:

.pager li a {

background: #232b30; /* old browrs */

background: -moz-linear-gradient(top, #3d4850 3%, #313d45 4%, #232b30 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3d4850), color-stop(4%,#313d45), color-stop(100%,#232b30)); /* webkit */

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#3d4850′, endcolorstr=’#232b30′,gradienttype=0 ); /* ie */

}

.pager li a:hover {

background: #4c5a64; /* old browrs */

background: -moz-linear-gradient(top, #4c5a64 3%, #404f5a 4%, #2e3940 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4c5a64), color-stop(4%,#404f5a), color-stop(100%,#2e3940)); /* webkit */

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#4c5a64′, endcolorstr=’#2e3940′,gradienttype=0); /* ie */

color: #d54e21;

}

3、动画效果

上面完成的只是一个静态的css3样式效果,但我们上面的demo中是有一个动态改变背景的效果,这个效果我主要使用了css3的transition属性:

复制代码 代码如下:

.pager li a {

-webkit-transition: all 0.5s ea-in 0s;

-moz-transition: all 0.5s ea-in 0s;

-o-transition: all 0.5s ea-in 0s;

transition: all 0.5s ea-in 0s;

}

请注意,我们的效果是在“a:hover”状态下发生的,所以大家会以为动画效果是加载在“a:hover”上,其实不是的,我需要在“a”上设置一个“transition”属性,当在“a:hover”状态下,元素样式参数值改变时,就会给我们带一个动画效果一样。具体的使用方法大家可以参阅《css3 transition 》。当然大家如果成使用更好的动画效果,你可以使用css3的animation来作。感兴趣的话可以参考animate.css和animatable.css。

4、当前项效果

因为我们当前项是没有放在“a”标签中的,为了让其和其他项样式一样,我们需要把当前项的样式和“a”链接的样式设置成一样,不同之处是,他的效果类似于“a:hover”效果:

复制代码 代码如下:

.pager li.pager-current,

.pager li a {

-moz-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

-webkit-border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

border-radius: 70px 20px 38px 20px / 20px 30px 10px 10px;

background: #232b30; /* old browrs */

background: -moz-linear-gradient(top, #3d4850 3%, #313d45 4%, #232b30 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3d4850), color-stop(4%,#313d45), color-stop(100%,#232b30)); /* webkit */

filter: progid:dximagetransform.microsoft.gradient( startcolorstr=’#3d4850′, endcolorstr=’#232b30′,gradienttype=0 ); /* ie */

-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* firefox */

-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* safari, chrome */

box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* css3 */

color: #ffffff;

font-size: 12px;

margin-left: 10px;

padding: 3px 12px;

-webkit-transition: all 0.5s ea-in 0s;

-moz-transition: all 0.5s ea-in 0s;

-o-transition: all 0.5s ea-in 0s;

transition: all 0.5s ea-in 0s;

text-decoration: none;

zoom:1;

}

.pager li.pager-current {

-moz-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

-webkit-border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

border-radius:20px 30px 10px 10px / 70px 20px 38px 20px;

color: #d54e21;

font-weight: bold;

}

5、列表居中

这一点是我今天要特别提出来的一点,大家都知道,我们列表项要放置在一行显示,需要使用“float”来实现,但是使用了浮动后,我们就无法让整个分页导航水平居中,如此一来就会给我们带来一个两难境地。那么今天我在这里给大家展示另外一种处理方法:“display:inline-block”来让列表项显示在一行,大爱看到这个肯定又说难了,因为其在ie6-7下是无法支持的。这一点大家说的一点不错,其实我们只需要在ie下稍作处理就ok了,我们具体来看一下如何实现其水平居中:

复制代码 代码如下:

.pager {

text-align: center;/*====让列表项内容居中放====*/

padding: 0;

margin: 20px;

list-style: none outside none;

}

.pager li {

display: inline-block;/*===改变列表项显示方式为行内块===*/

margin: 0;

padding: 0;

}

起到列表水平居中的效果,我们靠的就是上面的两句代码“text-align: center”和“display: inline-block”,但大家写的时候一定不能放借位置哟,前一句是放在“ul”中,后一句是放动名词作定语在“li”中,我们来看看效果:

从上图中我们很明显的看到了,ie6-7下是无法排在一行中显示的,那么我们现在来看如何处理他们的兼容问题。我们使用hack来,让ie6大班幼儿秋季育儿知识-7下按另外一种方法显示:

复制代码 代码如下:

[code]

* html .pager li { display: inline; }

*+html .pager li { display: inline; }

.pager li a {

zoom: 1;

}



[/code]

现在我们在来看一下,加上以上代码后的效果:

现在在所有浏览器下都能水平居中了。只是部分浏览器不支持css3的属性,这些我们无需理会他了。最后为了让其更美丽一点,我在这里还使用了css3的其他属性,比如说text-shadow、box-shadow等等。

那么一个和w3cplus站点一样的分页效果就做好了,感兴趣的话你也可以动手一试。大家一起来看一下最终效果吧:

本文发布于:2023-04-03 16:07:14,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/d7f4c11603f92b80612fb415c1314922.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:CSS3等相关属性制作分页导航实现代码.doc

本文 PDF 下载地址:CSS3等相关属性制作分页导航实现代码.pdf

标签:效果   代码   分页   放在
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图