网页中的虚线怎么做?

来源:互联网 发布:大连太合网络 编辑:程序博客网 时间:2024/04/28 15:18

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

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

方法一:用CSS直接定义。
代码如下:

<style>
table{border-collapse:collapse}
td{width:50px;height:20px;border:1px dotted #000000}
</style>
<table>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

然而用CSS定义的虚线表格有很多弊端:需要IE5.5+支持,虚线的疏密程序不可变等。所以就有第二种方法。
提示:这种做法跟细线表格的第三种方法相似。 
方法二:用背景图片实现的虚线表格。
1.在图象处理软件(Firework或者Photoshop)中做一个3X3的图片,中间是1X1大小的色块,色块的颜色就是虚线表格的虚线颜色,图1.2.11是把背景图片放大1600倍后的效果。

图1.2.11 放大到1600倍后的图片

2.在Dreamweaver中按Ctrl+Alt+T插入一个三行三列的表格,选中表格后在属性面板中作如图1.2.12所示的设置。

图1.2.12在属性面板中设置表格的背景图片

3.全选单元格(光标定位到第一个单元格,按住Shift键单击最后一个单元格),然后在属性面板中设置所有单元格的背景颜色,如图1.2.13所示。

图1.2.13 在属性面板中设置单元格的背景颜色

4.保存,预览。效果如图1.2.14所示。


图1.2.14 虚线表格效果预览
注意:背景图片边长大小必须跟表格的 CellSpacing 属性值一致。
提示:这种做法跟细线表格的第一种方法相似。
特别提示
第一种方法做的虚线表格在IE5.0上显示的是实线,效果跟细线表格一样,只有在IE5.5以上的浏览中看到的才是虚线。效果分别如图 1.2.15、图1.2.16所示。

图1.2.15 CSS实现的虚线表格效果(IE5)

图 1.2.16 CSS实现的虚线表格效果(IE6)

特别说明


虚线表格可以说是细线表格的变种,仔细看看,你会发现,主要方法还是跟做细线表格的一样 
原创粉丝点击