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

1。单条虚线代码:

<hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=#000000 size=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,删除其中的&nbsp;代码即可实现横虚线效果。竖虚线依此类推。

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

 

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


<STYLE TYPE="text/css">

A { text-decoration: NONE}

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

</style>

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

posted @ 2008-12-09 00:20  7sarah  阅读(8538)  评论(2编辑  收藏  举报