实例解说用CSS设置多彩的衔接下划线-CSS教程-爱易网页

实例解说用CSS设置多彩的衔接下划线

日期：2013-09-22　浏览次数：21040 次

　　链接下划线可以改变颜色吗？下面给大家讲解如何利用CSS改变连接下划线颜色。

　　我们在进行Web页面设计的时候，依据不同的需求，可能会想要去除链接下划线的效果。而此效果只需求一句话就可以处理了。代码如下：

text-decoration:none;

　　如果保留着链接文字的下划线，默认的颜色属性是如链接文字同样的颜色，看下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.Aiyiweb.Com</title><style type="text/css"></style></head><body><a href="http://www.Aiyiweb.Com/" class="texta">www.Aiyiweb.Com</a>----underline<br /><br /><a href="http://www.Aiyiweb.Com/" class="textb">www.Aiyiweb.Com</a>----overline<br /><br /></p></body></html>

[Ctrl+A 全部选择提示：你可先修正部分代码，再按运转]

　　如果我们想让链接下划线的颜色与链接文字的颜色不同，怎样做呢？自定义链接文字下划线的颜色，我们有两种方法可以实现。第一种是border的方法，第二种是视觉错位的方法。

　　border方法的实例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.Aiyiweb.Com</title><style type="text/css"></style></head><body><a href="http://www.Aiyiweb.Com/" class="texta">www.Aiyiweb.Com</a> <br /><br /><a href="http://www.Aiyiweb.Com/" class="textb">www.Aiyiweb.Com</a></p></body></html>

[Ctrl+A 全部选择提示：你可先修正部分代码，再按运转]

　　视觉错位的方法如下：

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

实例解说用CSS设置多彩的衔接下划线

相关资料更多>

推荐阅读更多>