|
HR标签简介: |
HR标签在HTML页面中创建一条水平线,在屏幕上显示一条水平线。 水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。 在HTML中,<hr> 标签没有结束标签。在XHTML 中,<hr> 必须被正确地关闭,比如<hr />。 |
实例 被水平线分隔的标题和段落: <h1>This is header 1</h1> <hr> <p>This is some text</p> |
This is header 1 This is some text |
<HR>的属性: size 水平线的宽度,规定hr元素的高度(厚度)。 width 水平线的长度,用占屏幕宽度的百分比或象素值来表示,规定hr元素的长度。 align 水平线的对齐方式,有LEFT RIGHT CENTER三种,规定hr元素的对齐方式。 noshade 线段无阴影属性,为实心线段,规定 hr 元素的颜色呈现为纯色。 |
1、size线段粗细的设定: |
<HR> 这是第一条线段,无size设定,取内定值SIZE=1来显示 <HR SIZE=5> 这是第二条线段,SIZE=5 <HR SIZE=10> 这是第三条线段,SIZE=10 |
这是第一条线段,无size设定,取内定值SIZE=1来显示 这是第二条线段,SIZE=5 这是第三条线段,SIZE=10 |
2、width线段长度的设定: |
<HR SIZE=3> 这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示 <HR width=50 SIZE=5> 这是第二条线段,WIDTH=50(点数方式) <HR width="50%" SIZE=7> 这是第三条线段,WIDTH=50%(百分比方式) |
这是第一条线段,无WIDTH设定,取WIDTH内定值100%来显示 这是第二条线段,WIDTH=50(点数方式) 这是第三条线段,WIDTH=50%(百分比方式) |
3、align线段排列的设定: |
<HR width="50%" SIZE=5> 这是第一条线段,无ALIGN设定,(取内定值RIGHT显示) <HR align=center width="60%" SIZE=7> 这是第二条线段,居中对齐 <HR align=right width="70%" SIZE=2> 这是第三条线段,向右对齐 |
这是第一条线段,无ALIGN设定,(取内定值RIGHT显示) 这是第二条线段,居中对齐 这是第三条线段,向右对齐 |
4、noshade无阴影的设定,为实心线段: |
<HR WIDTH=80% SIZE=5> 这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示 <HR WIDTH=80% SIZE=7 ALIGN=LEFT NOSHADE> 这是第二条线段,有NOSHADE设定 |
这是第一条线段,无NOSHADE设定,取内定值阴影效果来显示 这是第二条线段,有NOSHADE设定 |
HR标签水平分隔线修饰特效: |
none:无样式;dotted:点线;dashed:虚线;solid:实线; double:双线;groove:槽线;ridge:脊线;inset:内凹;outset:外凸。 1、dotted:点线 <HR style="border:3 dotted #ff0033" width="100%" SIZE=3> 2、dashed:虚线 <HR style="border:3 dashed #ff0033" width="100%" SIZE=3> 3、solid:实线 <HR style="border:3 solid #ff0033" width="100%" SIZE=3> 4、double:双线 <HR style="border:3 double #ff0033" width="100%" SIZE=3> 5、groove:槽线 <HR style="border:6 groove #ff0033" width="100%" SIZE=6> 6、ridge:脊线 <HR style="border:6 ridge #ff0033" width="100%" SIZE=6> 7、inset:内凹 <HR style="border:6 inset #ff0033" width="100%" SIZE=6> 8、outset:外凸 <HR style="border:6 outset #ff0033" width="100%" SIZE=6> 通过实践5—8并不理想,最好不要用。 |
两头渐变透明 纺锤形 右边渐变透明 左边渐变透明 立体效果 钢针效果 备注:这几种效果不适合表内嵌套存在,例句写在表外: |
1、两头渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
2、纺锤形:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=2)" width="80%" color=#987cb9 SIZE=10>
3、右边渐变透明:
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=1)" width="80%" color=#987cb9 SIZE=3>
4、左边渐变透明:
<HR style="FILTER: alpha(opacity=0,finishopacity=100,style=1)" width="80%" color=#987cb9 SIZE=3>
5、立体效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Shadow(color:#987cb9,direction:145,strength:15)" width="80%" color=#987cb9 SIZE=1>
6、钢针效果:
<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)" width="80%" color=#987cb9 SIZE=1>
评论