超链接下划线的小把戏
如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单，你也可以做到。
来这里看看实际效果 http://5key.net/demo/hyperlink-underline
首先，我们来说说这个彩色的下划线是怎么弄的。也许你已经猜到了，一张渐变的背景图片。没错！就是下面这张图片。
再看看下面的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;
}
10月 29th, 2007 at 10:48
还是那么一点基本语法，就看怎么用脑子去想点子，怎么去用了 [yes] [yes]
10月 29th, 2007 at 11:52
貌似FF下显示的效果很诡异
10月 29th, 2007 at 12:00
刚才的写法忽略了点小问题。现在搞定~ [lol]
10月 29th, 2007 at 13:10
吓我一跳，呵呵
10月 29th, 2007 at 14:05
其实彩虹线做一条就条．．．
a:link时background:url(1.gif) repeat-x 0 bottom;
a:hover 时background:url(1.gif) repeat-x 120px bottom;
彩虹线两端最近能连起来．这样在长文字时连会比较好看．这样也能解决文字放大后彩虹线错位的问题．
＝．＝ 这个办法在IE还有点不好的地方．就是．链接出现换行．．
10月 29th, 2007 at 14:07
[razz] 忘记说了．我们以前是还用过别一种方式．．
两张图片．．另一张会动的gif 移上去效果更好．．挖哈哈．
10月 29th, 2007 at 15:26
哈哈。aoao说得有道理。不过链接还是别整得太花的好。
10月 29th, 2007 at 15:41
"花了"人家才去點它嘛.哈哈
10月 29th, 2007 at 21:44
哈哈~~~低调，要低调….
10月 30th, 2007 at 12:29
为了花哨的技术，WEB开发不该如此浮躁
10月 30th, 2007 at 12:33
@waasai
此贴只是针对技术。我也不会将这样的效果运用到页面中。 [cool]
10月 30th, 2007 at 22:08
不仅是设计高手，着实佩服
10月 30th, 2007 at 23:52
这东西好玩哦~~
11月 1st, 2007 at 16:23
aoao的方法我用过, 普通是不动的点, hover状态就让它跑起来, 比这个有趣, 呵呵
11月 6th, 2007 at 00:19
[lol] 0 bottom这样写不合适
标准的:0 100%
01月 9th, 2008 at 09:30
用到的时候。。挺实用的！
02月 19th, 2008 at 14:07
[...] 文章地址：http://5key.net/blog/index.php/2007/10/29/hyperlink-underline/ [...]