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


Posted in HTML / CSS onDecember 24, 2012

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

目标

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

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

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

使用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="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 last" >
<a class="active" title="到最后一页" href="/css3?page=5" >尾页 » </a>
</li>
</ul>

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

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

CSS Code
有了结构,就需要用CSS来美化他:
复制代码
代码如下:

body {
font:12px/162% Tahoma,Arial,Helvetica,"SimSun","Arial Narrow",Geneva,sans-serif;
}
.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 browsers */
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 ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-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 browsers */
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;
}

上面是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 browsers */
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 browsers */
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 ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-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 browsers */
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 ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
transition: all 0.5s ease-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”中,我们来看看效果:

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

从上图中我们很明显的看到了,IE6-7下是无法排在一行中显示的,那么我们现在来看如何处理他们的兼容问题。我们使用Hack来,让IE6-7下按另外一种方法显示:

复制代码
代码如下:

[code]
* html .pager li { display: inline; }
*+html .pager li { display: inline; }
.pager li a {
zoom: 1;
}
   
[/code]
现在我们在来看一下,加上以上代码后的效果:

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

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

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

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

HTML / CSS 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 #HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 #HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 #HTML / CSS
button在IE6/7下的黑边去除方案
Dec 24 #HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 #HTML / CSS
image-set实现Retina屏幕下图片显示详细介绍
Dec 24 #HTML / CSS
You might like
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php 学习资料零碎东西
2010/12/04 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
python利用OpenCV2实现人脸检测
2020/04/16 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python+adb命令实现自动刷视频脚本案例
2020/04/23 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
积极分子思想汇报
2014/01/04 职场文书
本科生职业生涯规划书范文
2014/01/21 职场文书
团结演讲稿范文
2014/05/23 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
宾馆安全管理制度
2015/08/06 职场文书
运动会班级口号霸气押韵
2015/12/24 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
PyTorch device与cuda.device用法
2022/04/03 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL