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>
