一个分页栏的样式

最新推荐文章于 2021-09-01 14:17:33 发布

原创最新推荐文章于 2021-09-01 14:17:33 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #IE #HTML #XHTML

CSS 专栏收录该内容

35 篇文章

订阅专栏

转载自：http://www.codebit.cn/pub/html/xhtml_css/tip/css_pagination_links/

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.pagination{
	padding: 2px;
}

.pagination ul{
	margin: 0;
	padding: 0;
	text-align: left; /*Set to "right" to right align pagination interface*/
	font-size: 16px;
}

.pagination li{
	list-style-type: none;
	display: inline;
	padding-bottom: 1px;
}


.pagination a, .pagination a:visited{
	padding: 0 5px;
	border: 1px solid 9aafe5;
	text-decoration: none;
	color: 2e6ab1;
}


.pagination a:hover, .pagination a:active{
	border: 1px solid 2b66a5;
	color: 000;
	background-color: lightyellow;
}

.pagination li.currentpage{
	font-weight: bold;
	padding: 0 5px;
	border: 1px solid navy;
	background-color: 2e6ab1;
	color: FFF;
}

.pagination li.disablepage{
	padding: 0 5px;
	border: 1px solid 929292;
	color: 929292;
}

.pagination li.nextpage{
	font-weight: bold;
}

 /*IE 6 and below. Adjust non linked LIs slightly to account for bugs*/
* html .pagination li.currentpage, * html .pagination li.disablepage{
margin-right: 5px;
	padding-right: 0;
}

</style>

<div class="pagination">
<ul>
<li class="disablepage">???? previous</li>
<li class="currentpage">1</li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a>...</li>
<li><a href="">15</a></li>
<li><a href="">16</a></li>
<li class="nextpage"><a href="">next ????</a></li>
</ul>
</div>