CSS3制作的分页导航

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

目标

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

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

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

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

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/creat-pager-list-with-css3

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部