hiphen1 发表于 2005-3-3 01:05

大家跟我学习Html 系列 - (页面布局类)水平线段<HR> - 7

水平线段<HR>

  这个标签可以在屏幕上显示一条水平线,用以分割页面中的不同部分。<HR>有三个属性:

   size 水平线的宽度
   width 水平线的长,用占屏幕宽度的百分比或象素值来表示
   align 水平线的对齐方式,有LEFT RIGHT CENTER三种
   noshade 线段无阴影属性,为实心线段

  我们可以用几个例子来说明这线段的用法:



--------------------------------------------------------------------------------
线段粗细的设定






<HTML>
<HEAD>
<TITLE>线段粗细的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段,无size设定,取内定值SIZE=1来显示<BR>
<HR>
<P>这是第二条线段,SIZE=5<BR>
<HR SIZE=5>
<P>这是第三条线段,SIZE=10<BR>
<HR SIZE=10>
</BODY>

</HTML>




如图:
http://tinypic.com/1zt8ab

--------------------------------------------------------------------------------


线段长度的设定




<HTML>
<HEAD>
<TITLE>线段长度的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示<BR>
<HR SIZE=3>
<P>这是第二条线段,WIDTH=50(点数方式)<BR>
<HR WIDTH=50 SIZE=5>
<P>这是第三条线段,WIDTH=50%(百分比方式)<BR>
<HR WIDTH=50% SIZE=7>
</BODY>

</HTML>





如图:
http://tinypic.com/1zt8cp

--------------------------------------------------------------------------------


线段排列的设定




<HTML>
<HEAD>
<TITLE>线段排列的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段,无ALIGN设定,(取内定值CENTER显示)<BR>
<HR WIDTH=50% SIZE=5>
<P>这是第二条线段,向左对齐BR>
<HR WIDTH=60% SIZE=7 ALIGN=LEFT>
<P>这是第三条线段,向右对齐<BR>
<HR WIDTH=70% SIZE=2 ALIGN=RIGHT>
</BODY>

</HTML>




如图:
http://tinypic.com/1zt8h5


--------------------------------------------------------------------------------

无阴影的设定





<HTML>
<HEAD>
<TITLE>无阴影的设定</TITLE>
</HEAD>

<BODY>
<P>这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示<BR>
<HR WIDTH=80% SIZE=5>
<P>这是第二条线段,有NOSHADE设定<BR>
<HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE>
</BODY>

</HTML>




如图:
http://tinypic.com/1zt8iv

[ Last edited by hiphen1 on 2005-3-3 at 01:07 ]

hjack 发表于 2005-3-6 12:09

把水平线的宽度设成很小,高度设成很大,可以模拟垂直线的效果。
我是这样做的,不知楼主还有什么方法。大家share下啦。。

hiphen1 发表于 2005-3-6 22:41

我垂直线一般用table的td,或是图层实现
页: [1]
查看完整版本: 大家跟我学习Html 系列 - (页面布局类)水平线段&lt;HR&gt; - 7