演示-链接 演示-单页 演示-书签 演示-语法 演示-杂烩 演示-美图 栏目演示 演示-影音 源码下载 立即购买 申请试用 使用手册 系统更新
css实战:添加下划线
[分栏：演示-语法]在HTML5.0语法中，用双标签
可添加下划线到被作用文字。
但是用这个标签所添加的下划线有一个缺点，就是下划线与文字的颜色是统一的。
要让下划线和文字的颜色不一样，但可通过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;}
2012-10-14 18:00:59 电脑发表评论流民：
CSS语法中，使用text-decoration定义来控制文字的下划线等属性。
语法：
text-decoration:none||underline||blink||overline||line-through
参数：
none：无划线
underline：下划线
blink：闪烁（部分机器不支持）
overline：上划线
line-through：贯穿线
2012-10-15 09:23:56
过客：
第一种是通过样式的嵌套：
实现下划线与文字不同颜色
明显，这种方法比较麻烦。
2012-10-15 09:13:56
过客：
第二种是通过下边框假冒下划线
Quoted from Unkown:
这个方法实在是太妙了。但是也有一点点缺陷：但文字为英文或数字时，这个假冒的下划线明显离文字太远了（可能很多非中文的可能会出现这个问题）
2012-10-15 09:01:16
过客：
第三种就是用背景图片。
这个可以做到很多变化，因为我们可以用上各种线条图片。
缺点就是当链接多了，在读取图片的时候可能会比较消耗资源，慢一些。
不同的下划线
2012-10-15 08:49:17
过客：
还记得有些超链接文本没有下划线，但是当鼠标移到它的上面的时候，下划线就浮现出来的情况么？自定义的下划线也可以做到这个效果，那就在:hover上设定超链接背景，而不是在超链接标记a上设定，如下：
a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}
2012-10-15 08:44:52
【发表评论】
版权所有©飞速如风
精工细作 拒绝平庸