一个漂亮的分页样式CSS

admin · 发表于 2014-2-22 16:50:35

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

分享一个漂亮的分页样式CSS。代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>分页样式</title>
<style type="text/css">
html,body{margin:0;padding:0;list-style:none;border:none;font-size:12px;}
.page_list{float:left;position:relative;left:50%;clear:both;padding:25px 0;text-align:center;font-family:Tahoma;}.page_list .p_l{position:relative;float:left;left:-50%;}
.page_list a,.disabled,.page_list .current,.page_list .pageinfo{color:#403F3D;padding:0 11px 0 0;height:32px;display:block;float:left;line-height:32px;line-height:34px\9;_line-height:32px;text-decoration:none;margin:0 2px;background:url(bga.png) no-repeat right -150px;}
.page_list a:hover{color:#333;font-weight:normal;background-position:right -230px;text-decoration:none;}
.page_list .current{font-weight:bold;background-position:right -190px;color:#666;}
.page_list .pageinfo{color:#666;background-position:right -330px;margin-right:4px;}
.page_list u{width:3px;display:block;height:32px;float:left;padding-right:9px;*padding-right:9px;_padding-right:5px;overflow:hidden;background:url(bga.png) no-repeat 0 -150px;}
.page_list .current u{background-position:0 -190px;}
.page_list a:hover u{background-position:0 -230px;}
.page_list .pageinfo u{background-position:0 -330px;}
.page_list .disabled{color:#999;}
.page_list .one,.page_list .last{display:none;}
</style>
</head>
<body>
<div class="page_list">
<div class="p_l">
<div id="page_ipng">
<span class="disabled"><u></u>首页</span>
<span class="disabled"><u></u>上页</span>
<span class="current"><u></u>1</span>
<a title="第2页" href="#"><u></u>2</a>
<a title="第3页" href="#"><u></u>3</a>
<a title="第4页" href="#"><u></u>4</a>
<a title="第5页" href="#"><u></u>5</a>
<a title="第6页" href="#"><u></u>6</a>
<a title="第7页" href="#"><u></u>7</a>
<a title="第8页" href="#"><u></u>8</a>
<a title="第9页" href="#"><u></u>9</a>
<a title=下页 href="#"><u></u>下页</a>
<a title=末页 href="#"><u></u>末页</a>
</div>
</div>
</div>
</body>
</html>

复制代码

下面是素材图片，我直接拿下来的，没有优化请自行修改优化：

需要的素材图片

		自动登录	找回密码
密码			立即注册

[HTML/CSS] 一个漂亮的分页样式CSS

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子