在HTML5.0...佳通微博

首页|搜索|评论|底部|登录

演示-链接演示-单页演示-书签演示-语法演示-杂烩演示-美图栏目演示演示-影音源码下载立即购买申请试用使用手册系统更新

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-11-11 20:53:02 电脑
发表评论

【最近评论】更多

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

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

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

过客：
浮动动画箭头下划线（这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到）
a#example2b {
text-decoration: none;
white-space: nowrap;
padding-bottom: 5px;
}
a#example2b:hover {
background: url(’/pic/20069/200696144113188.gif’) repeat-x 100% 100%;}

2012-11-11 20:53:59

更多相关评论

【发表评论】

回顶部