hr
横线：<hr size="1" color="#999999">
竖线：<hr size=100 width="1" color="#999999">
<p>table控制:
<!-- height为横线的粗度,width为长度 -->
<table width=700>
<tr>
<td>横线</td></tr>
<tr bgcolor='red' height=3>
<td></td></tr>
</table>
<!-- height为竖线的长度,width为竖线的粗度 -->
<table>
<tr>
<td height='500' bgcolor='red'></td></tr>
</table>
有很多方法
1.用VML
<html xmlns:v="urn:schemas-microsoft-com:vml">
<STYLE>
v\:* { Behavior: url(#default#VML) }
</STYLE>
<body>
<v:line style="position:absoulte" from="100,0" to="100,100" >
</v:line>
</body>
2.用表格
<table border="0" cellpadding="0" cellspacing="0" style="width:1;height:100;background-Color:black;">
<tr><td>
</td></tr></table>
css 竖线的写法
<div style=" border: solid; margin-top: 2px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; padding-top: 5px; padding-bottom: 5px; border-width: 0px 1px; border-color: #99cccc #006699; font-size: 12px; line-height: 150%; padding-right: 5px; padding-left: 5px; color: #333333">sdfsdf</div>
用样式表最方便，代码简洁，可以统一整个网站的风格。
.td2 { border: solid; margin-top: 2px; margin-right: 2px;
margin-bottom: 2px; margin-left: 2px; padding-top: 5px; padding-bottom:
5px; border-width: 0px 1px; border-color: #99cccc #006699; font-size:
12px; line-height: 150%; padding-right: 5px; padding-left:
5px; color: #333333}
这里定义了表格的两个竖边的宽度和颜色，在页面里只是简单的写上<td class=td2>，多简单！:)
水平线不需要用CSS ，直接在代码中加入颜色的十六进制就可以了。
如：<hr color=#abcdef size="1">
我比较偏爱层,因为如果要组成动态的线条的话,
表格,图片,hr,还是要放到<div>中的
我一般这样写:
<div style="position:absolute; left:10px; top:10px;
border-left:1px solid black;
background:none;
font-size:0px"></div> (竖线)
如果会使用滤镜和js的话,可以做成很炫的效果
1<div style="width:1000;height:1;;border-top:1px dotted #000000"></div>2<s style="width:1000;height:1;border-top:1px dotted #000000"></s>3<b style="width:1000;height:1;border-top:1px dotted #000000"></b>4<input style="width:1000;height:1;border-top:1px dotted #000000">5<a style="width:1000;height:1;;border-top:1px dotted #000000"></a>6<center style="width:1000;height:1;;border-top:1px dotted #000000"></center>7<iframe style="width:1000;height:1;;border-top:1px dotted #000000;" frameborder=no></iframe>8<img style="width:1000;height:1;;border-top:1px dotted #000000"></img>9<hr size="1" noshade style="height:100;width:1;border:1px dotted #000000;zoom:2">线条长度=zoom*height10<hr size="1" noshade style="border:1px dotted #000000">部分不能显示请装IE5.5+
#网站-代码
<p>hr控制
<!-- width控制线的长度size控制线的粗细 -->
横线：<hr width=500 size=0 color="#999999">
<!-- width控制线的宽度，size控制线的长短 -->
竖线：<hr size=500 width="2" color="#999999">
<p>css(div)控制
<!-- width控制线的横线的长短，竖线的粗细；height:控制横线的粗细，竖线的粗细,但默认为一个字符的横线粗度 -->
坚线<div style="width: 2; height: 200; background-color: red;"></div>
横线<br><div style="position:relative; width:600; height:1px; background-color:red"></div>
关于线的位置：大多线情况还是用绝对位置,即position:absolute。当然，你也可以用相对位置position:relative
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
