page.css
/* page navigation style */
.pagelist{clear:both; padding:15px 0; color:#666; font:normal 12px/24px Arial; text-align:center;}
.pagelist a{display:inline-block; height:22px; margin:0 2px; padding:0 8px; border:solid 1px #dbe5ee; background:#fff; color:#333; font:normal 12px/22px Arial, Helvetica, sans-serif; cursor:pointer;}
.pagelist strong{display:inline-block; height:24px; margin:0 3px; padding:0 8px; border:none; background:#07519a; color:#fff; font-weight:normal; line-height:24px; text-decoration:none;}
.pagelist a:hover{height:24px; margin:0 3px; border:none; background:#07519a; color:#fff; line-height:24px; text-decoration:none;}
.pagelist a.select{cursor:default;}
看看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> - 博客频道 - CSDN.NET</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<div id="papelist" class="pagelist">
<span> 共9页</span><strong>1</strong>
<a href="/lushuaiyin/article/list/2">2</a>
<a href="/lushuaiyin/article/list/3">3</a>
<a href="/lushuaiyin/article/list/4">4</a>
<a href="/lushuaiyin/article/list/5">5</a>
<a href="/lushuaiyin/article/list/6">...</a>
<a href="/lushuaiyin/article/list/2">下一页</a>
<a href="/lushuaiyin/article/list/9">尾页</a>
</div>
</body>
</html>
这是csdn网站上的效果：
这是单独拿出来后的效果：
样式调起来很麻烦，调好看更不容易，代码能找就找，不能找再自己写，呵呵
124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
