分享一个自己写的分页条:
CSS代码如下:
.page{margin:68px auto;padding-left:25%;font-size:12px;}
.page ul li{float: left;height: 22px;line-height: 22px;cursor: pointer;list-style:none;}
.page ul li:hover,li.pagenumber:hover{color:#F66;}
.page .pageInfo{margin-left: 5px;}
.page .pagenumber{margin-left:-40px;}
.page .start{width:54px; padding:0 8px 0 0;text-align:right; height:22px; line-height:22px; display:block; text-align:right;background:url(page/first.png) no-repeat;}
.page .start_off{width:54px; padding:0 10px 0 0; text-align:right; background:url(page/first_off.png) no-repeat; font-family:Arial,Helvetica,sans-serif;}
.page .first{width:54px; padding:0 8px 0 0; height:22px; line-height:22px; display:block; text-align:right; background:url(page/prev.png) no-repeat;}
.page .first_off{width:54px; padding:0 8px 0 0; text-align:right; background:url(page/prev_off.png) no-repeat; font-family:Arial,Helvetica,sans-serif;}
.page .fleft{background:url(page/left.png); width:5px;}
.page .fcenter,.pagenumber li.nowPage{background:url(page/right.png); padding:0 5px;}
.page .fright{background:url(page/right.png) right; width:5px;}
.page .next{width:54px;margin-left:8px;padding:0px; height:22px; line-height:22px; display:block; text-align:left; background:url(page/next.png) no-repeat;}
.page .next_off{width:54px;margin-left:8px;padding:0px; text-align:left; background:url(page/next_off.png) no-repeat; font-family:Arial,Helvetica,sans-serif;}
.page .end{width:54px;margin-left:8px; padding:0 0 0 8px; height:22px; line-height:22px; display:block; text-align:left; background:url(page/last.png) no-repeat;}
.page .end_off{width:54px;margin-left:8px; padding:0 0 0 8px; text-align:left; background:url(page/last_off.png) no-repeat; font-family:Arial,Helvetica,sans-serif;}
.page .pagenumber li{color:#000; font-size:12px; font-family:Arial,Helvetica,sans-serif;}
.page .pagenumber li.nowPage{color: #F70707;font-weight: bold;font-size: 14px;}
.page select{padding:2px; height:22px; border:1px #CCC solid; background:#FFF; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
#totalPage,#currentPage{color:red;font-weight: bold;}
<div class="page">
<ul>
<li class="start">首页 </li>
<li class="first">上一页</li>
<li class="pagenumber">
<ul>
<li class="fleft"/>
<li class="fcenter">1</li>
<li class="fcenter">2</li>
<li class="fcenter">3</li>
<li class="nowPage">4</li>
<li class="fcenter">5</li>
<li class="fcenter">6</li>
<li class="fcenter">7</li>
<li class="fcenter">8</li>
<li class="fcenter">9</li>
<li class="fcenter">10</li>
<li class="fright"/>
</ul>
</li>
<li class="next">下一页</li>
<li class="end">尾页</li>
<li>
<select οnchange="window.open(this.options[this.selectedIndex].value,'_self');" class="rounded">
<option value="" selected="selected">5条/页</option>
<option value="">10条/页</option>
<option value="">20条/页</option>
</select>
</li>
<li class="pageInfo">共<span id="totalPage">6</span>条/<span id="currentPage">2</span>页</li>
</ul>
</div>
源码请在附件中下载!
附效果图: