当前位置 :| 主页>CSS教程>

用CSS实现链接的虚线下划线效果

来源：cssplay 作者：cssplay 时间：2008-05-10 点击：

修改您的样式表，找下边这段（一般都在开头）

a {
color:#3399FF;
font-weight:Normal; /*字体效果普通可以改成bold粗体*/
text-decoration:none; /*下划线效果：无下划线*/
}

a:hover {
color:#4499EE;
text-decoration:none; /*下划线效果：无下划线*/
border-bottom: 1px #0099CC dotted /*加一个只有下边的框边框为虚线*/
}

　　a{}控制连接的效果 a:hover{}控制鼠标移上去的效果。

一些CSS定义虚线实例代码

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建网页 2</title> </head> <body> <table width=150px height=150px> <tr > <td style="border-top:1px dotted buttonface">　haha</td> <td style="border-top:1px dotted buttonface;border-left:1px dotted buttonface">haha</td> </tr> <tr> <td style="border-top:1px dotted buttonface;border-bottom:1px dotted buttonface">haha</td> <td style="border-top:1px dotted buttonface;border-left:1px dotted buttonface;border-bottom:1px dotted buttonface">haha</td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

<table width="100" height="100" border="0" cellpadding="0" cellspacing="0" style="border: 1px dashed #000000;"> <tr> <td> </td> </tr> </table>
提示：您可以先修改部分代码再运行

<table> <tr align="center"> <td style="width:100px;height:100px;border-right:1px solid #f00 dotted;border-left:1px solid #f00 dotted">TD</td> </tr> </table>
提示：您可以先修改部分代码再运行

<table> <tr align="center"> <td style="width:100px;height:100px;border:dotted 1px black; border-width:0 1px;">TD</td> </tr> </table>
提示：您可以先修改部分代码再运行

Tag：虚线下划线效果 CSS教程 CSS定义虚线

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：没有了
下一篇：CSS样式表来控制网页字体的显示样式

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例