博客列表 >怎样在网页中画一条竖线?

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

小满未满的博客
小满未满的博客原创
2017年08月08日 21:44:041776浏览

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议