分页效果代码实例

 

<nav class="pagenav clearfix">
<a class='page-numbers' href='http://www.baidu.com/' title='第1页'>1</a>
<a class='page-numbers' href='http://www.baidu.com/page/2' title='第2页'>2</a>
<a class='page-numbers' href='http://www.baidu.com/page/3' title='第3页'>3</a>
<span class='page-numbers current'>4</span>
<a class='page-numbers' href='http://www.baidu.com/page/5' title='第5页'>5</a>
<span class='right'><a class='page-numbers page-numbers-prev' href='http://www.baidu.com/page/3' title='上一页'>上一页</a>
<span class="page-numbers-slash">/</span><a class='page-numbers page-numbers-next' href='http://www.baidu.com/page/5' title='下一页'>下一页</a></span>
</nav>

 

.pagenav {
position: relative;
z-index: 100;
width: 900px;
margin: 30px;
padding: 0 0 50px;
text-align: left;
font-weight: lighter;
font-family: miranafont,"Hiragino Sans GB",STXihei,"Microsoft YaHei",SimSun,sans-serif;
}
.pagenav .page-numbers, .pagenav-search a {
overflow: hidden;
margin-right: 40px;
height: 32px;
color: #98a1b2;
text-align: center;
font-size: 18px;
line-height: 32px;
}
.clearfix:before, .clearfix:after {
display: table;
content: " ";
}
.clearfix:after {
clear: both;
}
.pagenav .page-numbers.current {
color: #46b855;
background:#f0f2f7;
font-size: 30px;
_border-bottom: 1px solid #46b855;
}
.right {
float: right;
}
.pagenav .page-numbers.page-numbers-prev, .pagenav .page-numbers.page-numbers-next {
margin-right: 0;
}
.page-numbers-slash {
padding-right: 10px;
padding-left: 10px;
color: #98a1b2;
}
numbers.page-numbers-next {
margin-right: 0;
}