当前位置:学学看123知识中心电脑教学网页设计将超链接的下划线做成虚线的方法» 正文

将超链接的下划线做成虚线的方法

[06-11 19:37:09]   来源:http://www.xxk123.com  网页设计   阅读:8672

导读: 我们在浏览网页的时候,通常将鼠标移动文字超链接上时,在文字的下方会出现下划线,但这个下划线通常是实线,今天就教大家将超链接的下划线做成虚线的方法。 其实这样的效果,是先设置text-decoration:none,也就是去除了链接的下划线,然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现“下划线”变成多样效果。我们来看下面的代码: a.text:hover {text-decoration:none;border-bottom:1px dashed #ccc;/*下边框线,1象素,虚线,颜色ccc*/color:#c00;}a.text:hover {border-bottom:1px solid #c00;/*下边框线,1象素,实线,颜色c00*/color:#666;}

将超链接的下划线做成虚线的方法,标签:网页设计教程,网页设计知识,http://www.xxk123.com

    我们在浏览网页的时候,通常将鼠标移动文字超链接上时,在文字的下方会出现下划线,但这个下划线通常是实线,今天就教大家将超链接的下划线做成虚线的方法。

    其实这样的效果,是先设置text-decoration:none,也就是去除了链接的下划线,然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现“下划线”变成多样效果。我们来看下面的代码:

 a.text:hover {
text-decoration:none;
border-bottom:1px dashed #ccc;/*下边框线,1象素,虚线,颜色ccc*/
color:#c00;
}

a.text:hover {
border-bottom:1px solid #c00;/*下边框线,1象素,实线,颜色c00*/
color:#666;
}
Tag:网页设计网页设计教程,网页设计知识电脑教学 - 网页设计
《将超链接的下划线做成虚线的方法》相关文章

Copyright 学学看123 All Right Reserved.

1 2 3 4 5 6 7 8 9 10