首页 > 光明神 - 译林, 绾青丝 - WebDesign > 模仿Flickr和Digg的分页样式

模仿Flickr和Digg的分页样式

2008年6月22日 发表评论 阅读评论

原作者地址:http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html

最近有个新项目,正好也对过去的一些积累做些重构和升级。代码方面的以后静下心来抽空写一下,这两天正好有个需求,是要对原来的一个分页tag做改造,尤其是样式上的。以前tag中的样式已经非常老旧了。

分页样式

感觉像上个世纪的产品了,得换个时髦一点的样式。原作者选了两个学习榜样,分别是两位web2.0大牛,FlickrDigg 相信对这两个网站大家都不陌生。

Flickr和Digg样式的分页

 是不是很Cool,简单看一下代码吧,顺便说一下,原作者的第一个版本在IE下有问题,然后他的朋友修改了一下,我只好在巨人的肩膀上稍微把Flickr风格的hover效果加了一下。

Demo请点击

文件下载请点击 paginationss_m.zip

<ul id="pagination-digg">

<li class="previous-off">?Previous</li>

<li class="active">1</li>

<li><a href="?page=2" mce_href="?page=2">2</a></li>

<li><a href="?page=3" mce_href="?page=3">3</a></li>

<li><a href="?page=4" mce_href="?page=4">4</a></li>

<li><a href="?page=5" mce_href="?page=5">5</a></li>

<li><a href="?page=6" mce_href="?page=6">6</a></li>

<li><a href="?page=7" mce_href="?page=7">7</a></li>

<li class="next"><a href="?page=2" mce_href="?page=2">Next ?</a></li>

</ul>

代码还是很简洁的,不同风格间切换也非常方便,也没什么好多解释了,决定升级到digg风格了。

2,842 Views

  1. Luxel
    2008年6月22日15:48 | #1

    好家伙,俺收了

  2. 2008年6月24日20:53 | #2

    学习了,
    参考了!
    楼主辛苦了!

  3. 2009年7月17日22:08 | #3

    不错 收藏了!

  1. 本文目前尚无任何 trackbacks 和 pingbacks.