淘宝客
当前位置:云良资源网 / 源码下载 / JS网页代码 / 正文

如何将链接的下划线做成虚线代码

作者:云良资源网发布时间:2015-10-03 17:06浏览数量:177次评论数量:0次

我们在浏览网页的时候,经常可以看到链接的下划线是虚线,或者在link与hover不同状态,下划线会从虚线到实线的变化。这样的效果是如何实现的呢?
其实这样的效果,是设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现“下划线”变成多样效果。可以参考关于border-style的属性。
提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

以下为全部代码:

<style type="text/css">
<!-- 
a.texta { 
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#c00;

a.texta:hover { 
border-bottom:1px solid #c00;
color:#666;
}

a.textb { 
text-decoration:none;
border-bottom:1px dashed #ccc;
color:#069;

a.textb:hover { 
border-bottom:1px dashed #c00;
color:#000;
}
-->
</style>
<a href="http://www.12580sky.com/" class="texta">www.12580sky.com</a><br /><br />
<a href="http://www.12580sky.com/" class="textb">小高教学网</a>

<p>查找更多代码,请访问:<a href="http://www.12580sky.com" target="_blank">小高教学网</a></p>

免责声明: 本站提供的资源,都来自网络,版权争议与本站无关, 所有内容及软件的文章仅限用于学习和研究目的。 不得将上述内容用于商业或者非法用途, 否则,一切后果请用户自负,我们不保证内容的长久可用性, 通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。 如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 侵删请致信E-mail:799549349@qq.com 云良辅助网-学习最新QQ技术-最优秀的QQ技术网_最专业的资源收集分享平台
End

云良资源网

云良资源网 主页 联系他吧

描述:专业提供QQ活动,QQ技术,QQ技巧,电脑技巧以及其他网络技术

到期2020年11月30日

欢迎 发表评论:

请填写验证码