==========标题：css实战:添加下划线
==========时间：2012-10-14 18:00:59
==========来源：http://www.jtdx.cn/wap/index.asp?act=pl&id=164
==========以下为正文

在HTML5.0语法中，用双标签<u></u>可添加下划线到被作用文字。
但是用这个标签所添加的下划线有一个缺点，就是下划线与文字的颜色是统一的。
要让下划线和文字的颜色不一样，但可通过CSS语法，设置下边框的颜色来实现。
以下CSS代码，实现了下划线和文字不同色。
并且鼠标移上去和移下来时，下划线的颜色都不一样。
a:link {color:#036;text-decoration:none;border-bottom:1px solid #666;}
a:hover{color:#F90;text-decoration:none;border-bottom:1px solid #F90;}


==========回复1 流民　2012-10-15 09:23:56

CSS语法中，使用text-decoration定义来控制文字的下划线等属性。
语法：
text-decoration:none||underline||blink||overline||line-through
参数：
none：无划线
underline：下划线
blink：闪烁（部分机器不支持）
overline：上划线
line-through：贯穿线



==========回复2 过客　2012-10-15 09:13:56

第一种是通过样式的嵌套：
<style>
.icool{COLOR:green;}
a{text-decoration:none;}
A:hover{COLOR:red;TEXT-DECORATION:underline;}
</style>
<a href=1.html><font class=icool>实现下划线与文字不同颜色</font></a>
明显，这种方法比较麻烦。



==========回复3 过客　2012-10-15 09:01:16

第二种是通过下边框假冒下划线
Quoted from Unkown: 
<style>
a { color green; text-decoration:none; padding:0px; } 
a:hover { border-bottom:1px solid red; }
</style>
<a href=" 
这个方法实在是太妙了。但是也有一点点缺陷：但文字为英文或数字时，这个假冒的下划线明显离文字太远了（可能很多非中文的可能会出现这个问题）



==========回复4 过客　2012-10-15 08:49:17

第三种就是用背景图片。

这个可以做到很多变化，因为我们可以用上各种线条图片。

缺点就是当链接多了，在读取图片的时候可能会比较消耗资源，慢一些。

<style>

a{text-decoration: none;}

a:hover{background: url(’8.gif’) repeat-x 100% 100%;

white-space: nowrap;

padding-bottom:-1px;

}

</style>

<a href="dd.html">不同的下划线</a>



==========回复5 过客　2012-10-15 08:44:52

还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下： 
a { 
text-decoration: none; 
padding-bottom: 4px; 
white-space: nowrap; 
} 
a:hover { 
background: url(underline.gif) repeat-x 100% 100%; 
}



==========回复6 过客　2012-10-15 08:41:01

静态下划线 
a#example4a { 
text-decoration: none; 
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%; 
white-space: nowrap; 
padding-bottom: 10px 
}



==========回复7 过客　2012-10-15 08:39:39

浮动花朵效果下划线 
a#example4b { 
text-decoration: none; 
white-space: nowrap; 
padding-bottom: 10px; 
} 
a#example4b:hover { 
background: url(’/pic/20069/200696144112132.gif’) repeat-x 100% 100%; 
}



==========回复8 过客　2012-10-15 08:38:22

静态箭头下划线 
a#example1a { 
text-decoration: none; 
background: url(’/pic/20069/200696144112997.gif’) repeat-x 100% 100%; 
white-space: nowrap; 
padding-bottom: 5px 
}



==========回复9 过客　2012-10-15 08:35:33

浮动动画箭头下划线 （这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到） 

a#example2b { 

text-decoration: none; 

white-space: nowrap; 

padding-bottom: 5px; 

} 

a#example2b:hover { 

background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;}







==========更多关于《css实战:添加下划线》的评论/回复，
========== 请关注：http://www.jtdx.cn/wap/index.asp?act=pl&id=164