div+css分页条

分享一个自己写的分页条：

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">首页&nbsp;&nbsp;</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 onchange="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>

 源码请在附件中下载！

 附效果图:

评论

7 楼 宛丘001 2015-03-15  

这个不错，正需要

6 楼 xiangkanglin 2013-08-25  

图片不完整 样式也不完整

5 楼 q_chaochao 2011-10-28  

不错，代码还没看，学习中！

4 楼 wangkebin 2011-10-24  

guozhen_168 写道

这个分页还不错，如果你在弄个和它配备的grid就更加好了

呵呵 配备 如何配备呢？ 如果只是组合的话 我的博客有div+ul+li的表格demo 可以参考下

3 楼 wangkebin 2011-10-24  

hellostory 写道

不错，正好需要，能否给个其它皮肤呢？

呵呵,抱歉,我对CSS和ps不是太会,如有需要,你自己切图片和写css替换吧 

2 楼 hellostory 2011-10-23  

不错，正好需要，能否给个其它皮肤呢？

1 楼 guozhen_168 2011-10-23  

这个分页还不错，如果你在弄个和它配备的grid就更加好了