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 ο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>

 源码请在附件中下载!

 附效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值