不知道网上有没有做成这样的，纯粹是不小心做出来的。
最终效果说明：
页面结构是这样的
<li><a href="#">1</a></li>
最终看到的彩色下划线是根据li的背景色显示出来的
li{background:#f60;}
而鼠标移上去的色彩变化是根据
a:hover{background:#f93}
当然关键的地方在于
li{width:20px;height:20px}
定义li的高度时由于没有定义line-height:20px，所以会造成a标签在显示时下方会留空几个像素。正在由于这个错误，无意中产生了这个效果
请运行下段代码看效果。
<!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" lang="gb2312"> <head> <title>代码基地博客站</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Keywords" content="CSS页码链接" /> <meta name="Description" content="CSS制作的页码链接效果" /> <meta name="Author" content="jxdawei,[email protected]" /> <style type="text/css"> body{ font-size:62.5%; } h1{ font-size:1.4em; } h2{ clear:both; font-size:1.2em; } #pageClass{ clear:both; font-size:1.2em; } #pageClass ul{ list-style:none; } #pageClass li{ float:left; width:20px; height:20px; line-height:20px; border:1px solid silver; margin:0 3px; } #pageClass a{ display:block; text-align:center; } #pageClass a:link,#pageClass a:visited{ background:white; text-decoration: none; color:gray; } #pageClass a:hover,#pageClass a:active{ text-decoration: none; background:gray; color:white; } /*第二个效果*/ #pageClass2{ clear:both; font-size:1.2em; } #pageClass2 ul{ list-style:none; } #pageClass2 li{ float:left; width:20px; height:20px; border:1px solid silver; margin:0 3px; } #pageClass2 a{ display:block; text-align:center; } #pageClass2 a:link,#pageClass2 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass2 a:hover,#pageClass2 a:active{ text-decoration: none; background:gray; color:white; line-height:14px; } /*第三个效果*/ #pageClass3{ clear:both; font-size:1.2em; } #pageClass3 ul{ list-style:none; } #pageClass3 li{ float:left; width:20px; height:20px; border:1px solid silver; background:#f60; margin:0 3px; } #pageClass3 a{ display:block; text-align:center; line-height:16px; } #pageClass3 a:link,#pageClass3 a:visited{ background:white; text-decoration: none; color:gray; } #pageClass3 a:hover,#pageClass3 a:active{ text-decoration: none; background:#f93; color:white; line-height:16px; } </style> </head> <body> <h1>页码效果</h1> <h2>这是我原本想要去做的效果</h2> <div id="pageClass"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>做完之后成这样了</h2> <div id="pageClass2"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> <h2>改了改成这样了</h2> <div id="pageClass3"> <ul> <li><a href="http://www.iwcn.net/default.asp?cateID=3">1</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=4">2</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=5">3</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=6">4</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=8">5</a></li> <li><a href="http://www.iwcn.net/default.asp?cateID=9">6</a></li> <li><a href="http://www.iwcn.net/default.asp">7</a></li> </ul> </div> </body> </HTML>