网页虚线代码/表格边框虚线代码大全

最新推荐文章于 2026-06-29 14:50:56 发布

原创最新推荐文章于 2026-06-29 14:50:56 发布 · 1w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

杂侃

本文介绍如何使用HTML和CSS技术实现网页中的各种虚线和边框效果，包括单条虚线、表格边框、鼠标悬停下划线等，并提供具体的代码实例。

1。单条虚线代码：

大家都知道我们使用<hr>标签就可制作出一个细线条，不过我们可以对<hr>定义一些参数可以获取可爱的细虚线。我们也可以修改其中的color,size的参数可以得到不同的效果……

2。CSS定义表格边框大全(细线/虚线/点线)

定义表格边框全部为1 边框颜色 #C7C7C7代码为：

.tb1{ border:1px solid #C7C7C7;}

定义表格边框左1 下1 左1 右1 (实际同上) 边框颜色 #C7C7C7代码为：

.td2{ border-top:1px solid #C7C7C7; border-bottom:1px solid #C7C7C7; border-left:1px solid #C7C7C7; border-right:1px solid #C7C7C7;}

定义表格边框为1,上边框为0 边框颜色 #C7C7C7 下边框颜色为 #888888代码为：

.td2{ border:1px solid #C7C7C7; border-top:0px; border-bottom:1px solid #888888}

定义表格边框虚线代码为：

.tb1{ border:1px dashed #C7C7C7;}

定义表格边框点线代码为：

.tb1{ border:1px dotted #C7C7C7;}

方法二：在CSS里面设定。

如果你用DreamWeaver话，只要在CSS面板里new一个style，选择“redefine HTML Tag”，再在下拉菜单里先“table”，在弹出的面板里，category里选择border，在border里，将top,left,right,bottom都设成1px，颜色设成你想要的边框的颜色。然后在style下拉框里选择dashed。一切ok。只是所有的表格都会用虚线做边框了。注意，这个效果在浏览器里才能看见。

方法三：直接在html里设置（如果你只想让某一个表格边框是虚线的话）。

在表格的html里加上这个：

style="BORDER-LEFT: #000000 1PX DASHED; BORDER-RIGHT: #000000 1PX DASHED; BORDER-TOP: #000000 1PX DASHED; BORDER-BOTTOM: #000000 1PX DASHED"

颜色是十六位代码，你可以自己设。

注：方法二、三，只能在IE5.5里用，到了NETSCAPE里一点用处都没有，除非你用做好的底图填充。

网页中呈现虚线

使用Math.floor()可以获得一个数的整数部分。在网页中呈现虚线的原理是，2个点的颜色交替，周而复始。根据这个原理，使用JavaScript写一段document.write单元格的循环程序。首先将程序列出来：

<script>len=400;d1=2;d2=2;cou=Math.floor(len/(d1+d2));
document.write('<table cellspacing=0 cellpadding=0 height=1 width='+len+'><tr>');
for(i=0;i<cou;i++){document.write('<td width='+d2+'><td width='+d1+' bgcolor=333333>')}</script></table>

运行的结果如：
........................................

说明：len=400表示虚线的长度为400像素，d1和d2是黑白相间的间隔，cou=Math.floor(len/(d1+d2))，cou表示总共要循环的次数。例如这里是400像素的虚线，黑色点和白色的点都是2像素，那么就要循环100次。由这200个单元格组成一条虚线。

改变虚线的长度，请修改len=400的值；
改变虚线的颜色，请修改bgcolor=333333的值；
改变虚线的高度，请修改height=1的值；
改变虚线的密度，请修改d1和d2的值。

Q：网页中的虚线怎么做？

A：做一个2*1的图片，一半有色彩，一半透明，存成透明GIF，然后把它设置成单元格背景图，把单元格设置为高度为1，删除其中的 代码即可实现横虚线效果。竖虚线依此类推。

用CSS也可以办到，把border的属性设置为dotted。

鼠标放到文字上后在文字下面出现下划虚线

A { text-decoration: NONE}

A:hover {border-bottom:1px dashed #6099de }

</style>

<a class=middle href="#"><font color="#6099de">鼠标放上来会有下划线</font></a>

标签

#border #dreamweaver #c #css #html