csdn分页的样式源码
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网站上的效果：
这是单独拿出来后的效果：
样式调起来很麻烦，调好看更不容易，代码能找就找，不能找再自己写，呵呵