不知道网上有没有做成这样的,纯粹是不小心做出来的。 最终效果说明: 页面结构是这样的 <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,jxdawei@gmail.com" /> < 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 > 转载于:https://www.cnblogs.com/khdg/articles/815460.html