分页显示效果

效果如下：

 1     <!--分页显示效果-->
 2     <style type="text/css">
 3 
 4         /*设置div样式的整体布局*/
 5         .page-icon{
 6             margin:20px 0 0 0;/*设置距离顶部20像素*/
 7             font-size:0;/*修复行内元素之间空隙间隔*/
 8             text-align:center;/*设置内容居中显示*/
 9         }
10 
11         /*设置共有的的样式布局，主要是进行代码优化，提高运行效率*/
12         .page-icon a,.page-disabled,.page-next{
13             border:1px solid #ccc;
14             border-radius:3px;
15             padding:4px 10px 5px;
16             font-size:14PX;/*修复行内元素之间空隙间隔*/
17             margin-right:10px;
18         }
19 
20         /*对 a 标签进行样式布局 */
21         .page-icon a{
22             text-decoration:none;/*取消链接的下划线*/
23             color:#005aa0;
24         }
25 
26         .page-current{
27             color:#ff6600;
28             padding:4px 10px 5px;
29             font-size:14PX;/*修复行内元素之间空隙间隔*/
30         }
31 
32         .page-disabled{
33             color:#ccc;
34         }
35 
36         .page-next i,.page-disabled i{
37             cursor:pointer;/*设置鼠标经过时的显示状态，这里设置的是显示状态为小手状态*/
38             display:inline-block;/*设置显示的方式为行内块元素*/
39             width:5px;
40             height:9px;
41             background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*获取图标的背景链接*/
42         }
43         .page-disabled i{
44             background-position:-80px -608px;
45             margin-right:3px;
46         }
47 
48         .page-next i{
49             background-position:-62px -608px;
50             margin-left:3px;
51         }
52     </style>

<div>内代码如下：

 1 <div class="page-icon">
 2                     <span class="page-disabled"><i></i>上一页</span>
 3                     <span class="page-current">1</span>
 4                     <a href="#">2</a>
 5                     <a href="#">3</a>
 6                     <a href="#">4</a>
 7                     <a href="#">5</a>
 8                     <a href="#">6</a>
 9                     <a href="#">7</a>
10                     ……
11                     <a href="#">199</a>
12                     <a href="#">200</a>
13                     <a class="page-next" href="#">下一页<i></i></a>
14 </div>