CSS_一个常用分页样式

 

直接上代码：

 

 

 

<ul class="pager"><li class="page prev"><a href="#" mce_href="#"> < </a></li><li class="page cur"><a href="#" mce_href="#">1</a></li><li class="page"><a href="#" mce_href="#">2</a></li><li class="page"><a href="#" mce_href="#">3</a></li><li class="page"><a href="#" mce_href="#">4</a></li><li class="page next"><a href="#" mce_href="#"> > </a></li></ul>

 

.pager{height: 24px;line-height: 24px;}.page{display: inline;margin-right: 2px;font-size: 12px;text-align: center;}.pager li a{padding: 3px 5px;background-color: #F2F2F2;border-color:#DDDDDDD #999999 #9999999 #DDDDDD;border:1px solid #DDDDDD;border-right: 1px solid #999999;border-bottom: 1px solid #999999;color: #58595B;text-decoration: none;}.pager li a:hover{border-color: #AAAAAA #DDDDDD #AAAAAA #DDDDDD;border: 1px solid #AAAAAA;border-right: 1px solid #DDDDDD;border-bottom: 1px solid #DDDDDD;}.pager li.cur a{background-color: #58595B;color: #fff;font-weight: bold;}.pager li.prev a,.pager li.next a{background-color: #ccc;color: #666;}