美观 漂亮 分页 样式 HTML:
<body> <div class="navigation"> <ol class="wp-paginate"> <li><span class="title">Pages:</span></li> <li><span class="page current">1</span></li> <li><a href="" title="2" class="page">2</a></li> <li><a href="" title="3" class="page">3</a></li> <li><a href="" title="4" class="page">4</a></li> <li><a href="" title="5" class="page">5</a></li> <li><a href="" title="6" class="page">6</a></li> <li><a href="" title="7" class="page">7</a></li> <li><span class="gap">...</span></li> <li><a href="" title="31" class="page">31</a></li> <li><a href="" class="next">></a></li> </ol> </div>
CSS:
.navigation {
margin:auto auto 10px 10px;
float:left;
}
.wp-paginate {
padding:0;
margin:0;
}
.wp-paginate li {
float:left;
list-style:none;
margin:2px;
padding:0;
}
.wp-paginate a {
margin:0 2px;
line-height:20px;
text-align:center;
text-decoration:none;
border-radius:3px;
-moz-border-radius:3px;
float:left;
min-height:20px;
min-20px;
color:#858585;
border:2px #e3e3e3 solid;
border-radius:13px;
font-size:11px;
}
.wp-paginate a:hover {
border:2px #858585 solid;
color:#858585;
}
.wp-paginate .title {
color:#555;
margin:0;
margin-right:4px;
font-size:14px;
}
.wp-paginate .gap {
color:#999;
margin:0;
margin-right:4px;
}
.wp-paginate .current {
margin:0 2px;
line-height:20px;
text-align:center;
text-decoration:none;
border-radius:3px;
-moz-border-radius:3px;
float:left;
font-weight:700;
min-height:20px;
min-20px;
color:#262626;
border:2px #119eda solid;
border-radius:13px;
font-size:11px;
color:#119eda;
}
.wp-paginate .page {
margin:0;
padding:0;
}
.wp-paginate .prev {
}
.wp-paginate .next {
}