怎样在网页中画一条竖线？

最新推荐文章于 2024-08-02 00:52:30 发布

提拉米苏x

最新推荐文章于 2024-08-02 00:52:30 发布

阅读量5.5w

点赞数 1

分类专栏：【毕业设计】

【毕业设计】专栏收录该内容

17 篇文章 0 订阅

订阅专栏

hr
横线：<hr size="1" color="#999999">

竖线：<hr size=100 width="1" color="#999999">

<p>table控制:

<table width=700>
     <tr>
    <td>横线</td></tr>
<tr bgcolor='red' height=3>
   <td></td></tr>
</table>

<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控制

横线：<hr width=500 size=0 color="#999999">

竖线：<hr size=500 width="2" color="#999999">
<p>css(div)控制

坚线<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