IT民工的坐井观天

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

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

感觉像上个世纪的产品了，得换个时髦一点的样式。原作者选了两个学习榜样，分别是两位web2.0大牛，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