【 View】【收藏】【推荐】【评论】 如何将链接的下划线做成虚线？ (2008-02-29 )

下载 Download：
迅雷下载(推荐)　|　本地下载(电信)

来源：预览网址：#

重要：当提供源代码在代码框显示时，下载和演示地址可能无效，请点击下面的运行代码查看效果！

<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 class="texta" href="http://www.sincol.net/">www.sincol.net</a><br /><br /><a class="textb" href="http://www.sincol.net/">www.sincol.net</a>

提示：您可以修改部分代码再运行，复制和保存功能在Firefox下无效。

我们在浏览网页的时候，经常可以看到链接的下划线是虚线，或者在link与hover不同状态，下划线会从虚线到实线的变化。这样的效果是如何实现的呢？

其实这样的效果，是设置text-decoration:none。也就是去除了链接的下划线。然后再给链接加下边框线，设置下边框线不同的宽度、线型、颜色，就可以实现“下划线”变成多样效果。可以参考关于border-style的属性。

上一篇：如何用CSS自定义鼠标显示的形状？下一篇：如何让层垂直居中于浏览器窗口？

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

服务赞助商

来源：预览网址：#

上一篇：如何用CSS自定义鼠标显示的形状？下一篇：如何让层垂直居中于浏览器窗口？

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称：论坛注册

服务赞助商

随机显示10条设计素材

CSS凹陷文字

始终在页面底部的层效果

改变文本框里的文字颜色

如何用CSS实现在新窗口打开链接？

如何用CSS自定义鼠标显示的形状？

字号缩放代码

仿6room网站图片链接效果

CSS自适应宽度按钮

一个弹出层的JS特效

去掉链接虚线框

酷站 + 代码 + 实用代码 js div css html + 详细内容

来源： 预览网址：#

上一篇：如何用CSS自定义鼠标显示的形状？ 下一篇：如何让层垂直居中于浏览器窗口？

共有 0 位酷友发表了评论, 点此查看全部 酷友评论(Comments)

添加评论(Add Comments) 不能超过250字，需审核，请自觉遵守互联网相关政策法规。

昵称： 论坛注册 密码： 匿名?

服务赞助商

随机显示10条设计素材

来源：预览网址：#

上一篇：如何用CSS自定义鼠标显示的形状？下一篇：如何让层垂直居中于浏览器窗口？

共有 0 位酷友发表了评论, 点此查看全部酷友评论(Comments)

昵称：论坛注册