备份一个简单的分页条

iteye_12132

于 2013-07-20 10:57:45 发布

阅读量94

点赞数

分类专栏： DOM CSS

CSS 同时被 2 个专栏收录

35 篇文章

订阅专栏

DOM

30 篇文章

订阅专栏



<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;}