IT动力源论坛 » ≡开发与设计≡ » 『 图形图像区』 » 用图片实现超级链接的个性化下划线

recls 发表于 2008-2-16 23:28

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

实现超链接的个性化下划线其实很简单，用一些基本的语法，利用CSS中的滑动门技术（即背景图像的可层叠性），并允许他们在彼此之上进行滑动，以创造一些特殊的效果即可：

                                [img]http://www.weste.net/Files/RoUpFiles/30a0144100.gif[/img]

　　首先，我们来说说这个彩色的下划线是怎么弄的:利用一张渐变的背景图片。 　　
                                    [img=277,37]http://www.weste.net/Files/RoUpFiles/cpm6o2gu3c.jpg[/img]
再看看下面的css代码：


body {
  font-size:14px;
  font-family: Helvetica, sans-serif;
  padding:10px;
  margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
  *padding-bottom:1px;
  text-decoration:none;
  }
a:link{
  color:#06F;
  background: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:visited{
  color:#06f;
  background-image: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:hover{
  color:#039;
  background:url(1.gif) repeat-x 0 bottom;
}

能力透视 发表于 2008-2-29 06:47

3:) 3:) 3:) 3:) 3:) 学习中~~~~~

广大嘎登 发表于 2009-1-4 16:50

好的呢！~~~~~~~~~~~~

如何取舍 发表于 2009-3-14 14:13

加油 辛苦了 支持你

房祖名 发表于 2009-3-31 21:06

没大看懂哦??
偶太笨了~

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