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="Co荏鱿胫协ntent-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>
