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; }