web页面常用分页效果

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