1、在BODY中添加如下代码
<body>
<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">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 class="next"><a href="">Next »</a></li>
</ul>
</body>
2、在head中创建style，并设置引用刚才的样式 pagination-digg
3、<style type="text/css" media="screen">
#pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888;
display: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; /* savers */ margin-right:2px; }
#pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px;
text-decoration:none; }
#pagination-digg a:hover { border:solid 1px #0e509e; }
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; }
h2{ clear:both; border:0; margin:0; padding-top:30px; font-size:13px; }
p{ border:0; margin:0; padding:0; padding-bottom:20px; }
ul{ border:0; margin:0; padding:0; }
</style>
4、完整的分页html源代码如下（纯CSS）
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂亮的分页按钮样式</title>
<style type="text/css" media="screen">
#pagination-digg li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-digg a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-digg .previous-off,#pagination-digg .next-off { border:solid 1px #DEDEDE; color:#888888;
display: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; /* savers */ margin-right:2px; }
#pagination-digg a:link,#pagination-digg a:visited { color:#0e509e; display:block; float:left; padding:3px 6px;
text-decoration:none; }
#pagination-digg a:hover { border:solid 1px #0e509e; }
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; }
h2{ clear:both; border:0; margin:0; padding-top:30px; font-size:13px; }
p{ border:0; margin:0; padding:0; padding-bottom:20px; }
ul{ border:0; margin:0; padding:0; }
</style>
</head>
<body>
<ul id="pagination-digg">
<li class="previous-off">«Previous</li>
<li class="active">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 class="next"><a href="">Next »</a></li>
</ul>
</body>
</html>
