简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 怎样在网页中画一条竖线？
Blogger Information
Blog 5
fans 0
comment 0
visits 4905
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
怎样在网页中画一条竖线？
小满未满的博客
Original
1777 people have browsed it

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


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！