如何去掉链接上的下划线

时间：2012-10-15

  在网页上最常见的来,有时候我们习惯于链接样式就是下划线了,这也是浏览器默认的样式,目的是把链接文字和普通文字区分开将普通状态链接的下划线取消,采用其他方式区别于普通文字(比如对文字进行加粗,更换颜色等),当鼠标悬停在上面时再显示下划线.具体的代码写法如下:

a{color:#00ff33};                              /*所有链接为绿色*/
a:link, a:visited{text-decoration:none;};      /*去掉下划线*/
a:hover, a:active{text-decoration:underline;}  /*添加下划线*/

  遗憾的是通过text-decoraton属性的下划线样式稍显简单,只能是1px大小的实心线条,那么能不能添加其他样式的下划线呢,答案是可以的,只要在链接的样式里加上border-bottom:1px dotted red就行,样式是可以千变万化的,大家平时设计的时候可以多尝试一下.