分页显示效果
效果如下:
<style>内代码如下:
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>