1、分页效果如下:
代码实现:
<!-- 分页 -->
<div id="pages" class="pb-50 mtb-25">
<div class="common">
<ul>
<ul class="clearfix page-center">
<li><span class="rows">共 18 条记录</span></li>
<li><a class="prev" href="javascript:void(0);">上一页</a></li>
<li><span class="current">1</span></li>
<li><a class="num" href="#">2</a></li>
<li><a class="next" href="#">下一页</a></li>
</ul>
</ul>
<div class="clear"></div>
</div>
</div>
css样式实现:
/* 分页 */
#pages .page-center{
float: left;
transform: translateX(100%);
}
#pages ul li{
display:block;
float:left;
height:36px;
text-align:center;
line-height:36px;
margin-right:5px;
color:#a9a9a9;
}
#pages ul li a , #pages ul li span{
display:block;
float:left;
background:#fff;
padding:0 15px;
height:36px;
text-align:center;
line-height:36px;
color:#a9a9a9;
}
#pages ul li span{
background: #0068b7;
color:#fff;
}
#pages ul li a:hover{
background-color:#969696;
color:#fff;
}
#pages ul .prev a{
background:#fff url(../images/icons.png) no-repeat -52px -217px;
}
#pages ul .next a{
background:#fff url(../images/icons.png) no-repeat -75px -247px;
}
#pages ul .prev a:hover{
background-position:-76px -217px;
}
#pages ul .next a:hover{
background-position:-50px -247px;
}