1.制作如下页码
效果:
HTML代码:
<div class="page-normal">
<span class="page-prev"><</span>
<span class="page-cur">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
...
<a href="#">10</a>
<a href="#">></a>
</div>
CSS代码:
.page-normal{
color:#ff6500;
text-align:center;}
.page-normal .page-prev{
border:1px solid #ffe3c6;
padding:5px 7px;
color:#ffe3c6;}
.page-normal .page-cur{
border:1px solid #ff6500;
padding:5px 7px;
color:#ff6500;
background-color:#ffbe94;}
.page-normal a{
border:1px solid #ff9600;
padding:5px 7px;
color:#ff9600;
text-decoration:none;}
2.解决行内元素中间有空隙的bug
出现原因:HTML代码中有换行符,制表符或则空格
解决方法:
- 元素写成一行
- 设置父元素“font-size:0”,设置父元素中子元素的font-size
3.加入小图标
效果
HTML代码
<div class="page-icon">
<span class="page-disabled"><i></i>上一页</span>
<span class="page-current">1</span>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<span class="ellipsis">...</span>
<a href="#">199</a>
<a href="#">200</a>
<a class="page-next" href="#">下一页<i></i></a>
</div>
CSS代码
<style type="text/css">
.page-icon{
margin:20px 0 0 0;
font-size:0;/*修复行内元素之间空隙间隔*/
text-align:center;
}
.page-icon a,.page-disabled,page-next{
border:1px solid #ccc;
border-radius:3px;
padding:4px 10px 5px;
font-size:14PX;/*修复行内元素之间空隙间隔*/
margin-right:10px;
}
.page-icon a{
text-decoration:none;
color:#005aa0;
}
.page-current{
color:#ff6600;
padding:4px 10px 5px;
font-size:14PX;/*修复行内元素之间空隙间隔*/
}
.page-disabled{
color:#ccc;
}
.ellipsis{
font-size:14PX;/*修复行内元素之间空隙间隔*/
padding:4px 5px;
}
.page-next i,.page-disabled i{
cursor:pointer;
display:inline-block;/*设置inline-block,不然不能设置width和height*/
width:5px;/*设置宽度*/
height:9px;/*设置高度*/
background-image:url(http://img.mukewang.com/547fdbc60001bab900880700.gif);/*引入图标*/
}
.page-disabled i{
background-position:-80px -608px;/*从(80,608)开始显示*/
margin-right:3px;
}
.page-next i{
background-position:-62px -608px;/*从(62,608)开始显示*/
margin-left:3px;
}
</style>