==========标题：css实战:添加下划线
==========时间：2012-11-11 20:53:02
==========来源：http://jtdx.cn/wap/index.asp?act=pl&id=232
==========以下为正文


在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-11-11 20:56:12

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



==========回复2 过客　2012-11-11 20:56:10

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



==========回复3 过客　2012-11-11 20:55:01

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



==========回复4 过客　2012-11-11 20:54:24

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



==========回复5 过客　2012-11-11 20:53:59

浮动动画箭头下划线 （这里箭头会出现滚动，不过这一滚动图片的效果只在部分浏览器中看得到） 
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://jtdx.cn/wap/index.asp?act=pl&id=232