UI

漂亮的分页样式

<style>ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-flickr li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
}
#pagination-flickr a {
	border:solid 1px #DDDDDD;
	margin-right:2px;
}
#pagination-flickr .previous-off,#pagination-flickr .next-off {
	color:#666666;
	display:block;
	float:left;
	font-weight:bold;
	padding:3px 4px;
}
#pagination-flickr .next a,#pagination-flickr .previous a {
	font-weight:bold;
	border:solid 1px #FFFFFF;
}
#pagination-flickr .active {
	color:#ff0084;
	font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-flickr a:link,#pagination-flickr a:visited {
	color:#0063e3;
	display:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-flickr a:hover {
	border:solid 1px #666666;
}
</style>
Flickr-like pagination:
<ul id="pagination-flickr">
	<li class="previous-off">? Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=2">Next ? </a></li>
</ul>
<p></p>
<style>ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-digg li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
	margin-right:2px;
}
#pagination-digg a {
	border:solid 1px #9aafe5margin-right:2px;
}
#pagination-digg .previous-off,#pagination-digg .next-off {
	border:solid 1px #DEDEDEcolor:#888888display:block;
	float:left;
	font-weight:bold;
	margin-right:2px;
	padding:3px 4px;
}
#pagination-digg .next a,#pagination-digg .previous a {
	font-weight:bold;
}
#pagination-digg .active {
	background:#2e6ab1;
	color:#FFFFFF;
	font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-digg a:link,#pagination-digg a:visited {
	color:#0e509edisplay:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-digg a:hover {
	border:solid 1px #0e509e
}
</style>
Digg-like pagination:
<ul id="pagination-digg">
	<li class="previous-off">? Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=2">Next ? </a></li>
</ul>
<p></p>
<style>ul {
	border:0;
	margin:0;
	padding:0;
}
#pagination-clean li {
	border:0;
	margin:0;
	padding:0;
	font-size:11px;
	list-style:none;
}
#pagination-clean li,#pagination-clean a {
	border:solid 1px #DEDEDEmargin-right:2px;
}
#pagination-clean .previous-off,#pagination-clean .next-off {
	color:#888888display:block;
	float:left;
	font-weight:bold;
	padding:3px 4px;
}
#pagination-clean .next a,#pagination-clean .previous a {
	font-weight:bold;
	border:solid 1px #FFFFFF;
}
#pagination-clean .active {
	color:#00000font-weight:bold;
	display:block;
	float:left;
	padding:4px 6px;
}
#pagination-clean a:link,#pagination-clean a:visited {
	color:#0033CCdisplay:block;
	float:left;
	padding:3px 6px;
	text-decoration:none;
}
#pagination-clean a:hover {
	text-decoration: none;
}
</style>
Clean pagination style:
<ul id="pagination-clean">
	<li class="previous-off">? Previous</li>
	<li class="active">1</li>
	<li><a href="?page=2">2</a></li>
	<li><a href="?page=3">3</a></li>
	<li><a href="?page=4">4</a></li>
	<li><a href="?page=5">5</a></li>
	<li><a href="?page=6">6</a></li>
	<li><a href="?page=7">7</a></li>
	<li class="next"><a href="?page=2">Next ? </a></li>
</ul>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部