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;}
但是用这个标签所添加的下划线有一个缺点,就是下划线与文字的颜色是统一的。
要让下划线和文字的颜色不一样,但可通过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 通过电脑发布 907次围观
« 前一编:CSS 语法:背景设定
CSS语法改变字体的属性:后一编 »
【关于css实战:添加下划线的最近评论/回复】
第1楼
2012-10-15 09:23:56
流民
CSS语法中,使用text-decoration定义来控制文字的下划线等属性。
语法:
text-decoration:none||underline||blink||overline||line-through
参数:
none:无划线
underline:下划线
blink:闪烁(部分机器不支持)
overline:上划线
line-through:贯穿线
语法:
text-decoration:none||underline||blink||overline||line-through
参数:
none:无划线
underline:下划线
blink:闪烁(部分机器不支持)
overline:上划线
line-through:贯穿线
第3楼
2012-10-15 09:01:16
过客
第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%;
}
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
}
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%;
}
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
}
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%;}
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
a#example2b:hover {
background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;}