效果图：
HTML文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>超实用的翻页</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <ul class="white"> <li class="first"><a href="###">1</a></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><a href="###">8</a></li> <li><a href="###">9</a></li> <li><a href="###">10</a></li> </ul> <ul class="black"> <li class="first"><a href="###">1</a></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><a href="###">8</a></li> <li><a href="###">9</a></li> <li><a href="###">10</a></li> </ul> <ul class="blackgreen"> <li class="first"><a href="###">1</a></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><a href="###">8</a></li> <li><a href="###">9</a></li> <li><a href="###">10</a></li> </ul> </body> </html>
样式文件：
* { padding:0; margin:0; } body { margin:40px; font-size:12px; } ul { background:white; width:600px; height:25px; list-style-type:none; padding:10px; } ul li { float:left; margin-right:5px; } ul li a { display:block; padding:3px 8px; border:1px solid black; text-decoration:none; color:black; } ul li a:hover,ul li.first a { background:black; color:white; font-weight:bold; } ul.black { background:black; } ul.black li a { border:1px solid white; color:white; } ul.black li a:hover,ul.black li.first a { background:#333; color:white; font-weight:bold; } ul.blackgreen { background:white; } ul.blackgreen li a { border:1px solid #f60; color:black; } ul.blackgreen li a:hover,ul.blackgreen li.first a { background:green; color:white; font-weight:bold; }