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

2024-07-11 08:29:15

字体：大中小

来源：转载

供稿：网友

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="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的截图中来看这样的区别：

上一篇：移动Web—CSS为Retina屏幕替换更高质量的图片

下一篇：使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码