当前位置: 代码迷 >> Web前端 >> 备份一个简略的分页条
  详细解决方案

备份一个简略的分页条

热度:63   发布时间:2013-08-01 15:23:18.0
备份一个简单的分页条

<div class="pageBar">
	<form class="pageForm" action="">
	      <a class="link" href="" title="上一页"><</a>
	      <span class="link curr">1</span>
	      <a class="link" href="">2</a>
	      <a class="link" href="">3</a>
	      <span class="link">...</span>
	      <a class="link" href="">6</a>
	      <a class="link" href="">7</a>
	      <a class="link" href="" title="下一页">></a>
	      <input type="text" class="jumpNum" /> /15
	      <input type="button" class="jumpBtn" value="GO" />
	</form>
</div>


.pageBar{text-align:right;margin:18px 20px 18px 0;}
.pageBar .link{display:inline-block;padding:2px 8px;margin:2px;color:#777;}
.pageBar a.link{border:1px solid #c1c1c1;background:#e1e1e1;border-radius:3px;}
.pageBar a.link:hover{color:#ff7700;border-color:#e39a5b;}
.pageBar .jumpNum,.pageBar .jumpBtn{vertical-align:top;width:25px;height:20px;border:1px solid #c1c1c1;}
.pageBar .jumpBtn{cursor:pointer;height:25px;border-radius:13px;color:#ff7700;}
  相关解决方案