实例讲解用CSS设置多彩的连接下划线
2008-02-23 08:44:08来源:互联网 阅读 ()
![新老客户大回馈,云服务器低至5折](/info/templets/default/images/760x90_D.jpg)
链接下划线可以改变颜色吗?下面给大家讲解如何利用CSS改变连接下划线颜色。
我们在进行Web页面设计的时候,根据不同的需要,可能会想要去除链接下划线的效果。而此效果只需要一句话就可以解决了。代码如下:
text-decoration:none;
如果保留着链接文字的下划线,默认的颜色属性是如链接文字同样的颜色,看下面的例子:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
如果我们想让链接下划线的颜色与链接文字的颜色不同,怎么做呢?自定义链接文字下划线的颜色,我们有两种方法可以实现。第一种是border的方法,第二种是视觉错位的方法。
border方法的实例如下:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
视觉错位的方法如下:
[Ctrl A 全部选择 提示:你可先修改部分代码,再按运行]
视觉错位的方法其实是加上一个span标签,并定义此标签的颜色,让其与链接文字下划线的颜色区别开来。以达到改变链接文字下划线改变的效果。
如何将链接的下划线做成虚线?
我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢?
其实这样的效果,是设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现“下划线”变成多样效果。可以参考关于border-style的属性。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash