查看完整版本: 用图片实现超级链接的个性化下划线

用图片实现超级链接的个性化下划线

实现超链接的个性化下划线其实很简单，用一些基本的语法，利用CSS中的滑动门技术（即背景图像的可层叠性），并允许他们在彼此之上进行滑动，以创造一些特殊的效果即可：
C1Ry&S^ w [img]http://homepage.yesky.com/imagelist/2007/304/i1gzcf1gz869.gif[/img]
:Y3Qy2BII5^
6n]xB]A 首先，我们来说说这个彩色的下划线是怎么弄的:利用一张渐变的背景图片。!]tW+zRh8y

e@'Z{8v1Y? [img]http://homepage.yesky.com/imagelist/2007/304/u1cpm6o2gu3c.jpg[/img]
w?0y8iY$AY
@ `U9n/o4kpZ;O 　　再看看下面的css代码：[code]body { D[2c7uU+^)HbD
  font-size:14px;
(xLV(ISBZ4~]   font-family: Helvetica, sans-serif; NXpghJJ~
  padding:10px;
2]#T8O:iz!k8F"tI   margin:0px;
/@h1x4N4kzEjf } .\:])|O9e1bt+a
h1{margin:0; padding:0; font-size:16px; } P;F:` x1["pX
p{padding:20px 0 0 0;}
I1Rw0`Nno a{
ZC[8V+b.O(m   *padding-bottom:1px;
j!mY!^'p$`Y2uS1eS-j   text-decoration:none; VE0f@*uS3\
  }
O-o1D%q4nB)^(`&[/s a:link{
5FD5v1f lh%H{$o(M   color:#06F;
&y X8T'B0X8r6iz"ze   background: url(1.gif); epWS FY?/EA
  background-repeat: repeat-x;
eEFXfwh   background-position: 0 16px;
"^Err iC
v n }
uM8P8VfK&u| a:visited{
7zA/lS8^"NX   color:#06f; aL4ibhfW
  background-image: url(1.gif);
6D,b%g4@8\*~Pd   background-repeat: repeat-x;
[Axj;O-c_C   background-position: 0 16px; :fl&t,x-J h5K
} %v/?nv b
a:hover{
f1u1f"\p;Y   color:#039; +N CA7bE%H$gnv$I
  background:url(1.gif) repeat-x 0 bottom;
ubE4^U }[/code]