查看旧版所有文章

有风的日子,网页设计爱好者的家园

旧版

您现在访问的是有风的日子旧版!新版地址为:http://www.hellowind.com
有风的日子现已全面升级!新标识,新域名,新架构,新布局,新平台,不变的承诺——有风的日子,网页设计爱好者的家园
为网页设计、平面设计、多媒体设计及摄影爱好者提供资讯、博客、相册、论坛等多方位服务...

网页中竖线的几种做法

来源:有风的日子设计论坛    发表于2005-7-20 10:21:18

关键字:竖线

Q:网页中竖线的几种做法

A:1、用水平线做:
一般水平线的是宽长高短<hr width="1000" size="1" color=#000000>,做竖线我们可以反过来宽短高长,<hr width="1"size="1000" color=#000000>,怎么样?竖线出来了吧?不过这个做法我发现好象有个BUG,就是高只能显示100px的,你设的再高也没用!

2、用表格做:
(1) 代码如下:
<table width="1" border="1" bordercolor="#000000" height="1000" frame=rhs>
<tr>
<td style="border:none"></td>
</tr>
</table>
做法:先做出细线表格,然后……用frame可以控制表格只显示一边的线条,左右上下四条线随便控制。想想,表格已经是细线表格了,现在我只要控制它显示一条边[这里我控制的是显示右边的线条],这样竖线就出来了!是不是?容易吧?

(2) 代码如下:
<table width="1" height=1000 border="0">
<tr>
<td width="1" bgcolor="#000000"><img src=empty width="1" height="1"></td>
</tr>
</table>
这个做法也简单,把背景色设置一下,宽设1px,高度就随便你控制啦~注意表格中间的填充!

(3) 定义表格的背景色,再改表格的width,height,然后去掉其中的“&nbsp;”。但这只能在ie下看。如果要适合nc,就得再进行修改,有两种方法:
A:制作一个1×1px的透明图片将其插入。
B:在td中加入<spacer type=block height=1>或<spacer type=block width=1>

3、用层做:
这是最简单的做法,做一个层,层的背景色是你要的竖线颜色,宽度是1px,长度随你!
<div id="Layer1" style="position:absolute; width:1px; height:200px; z-index:1; background-color: #000000;layer-background-color: #000000; border: 1px none #000000; left: 143px; top: 263px"></div>