[转]CSS页码效果

不知道网上有没有做成这样的，纯粹是不小心做出来的。
最终效果说明：
页面结构是这样的

<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