不知道網上有沒有做成這樣的，純粹是不小心做出來的。
最終效果說明：
頁面結構是這樣的
<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>
最終效果說明：
頁面結構是這樣的
程序代碼
<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>
