HTML 中hr标签属性及虚线

2015年1月12日19:18:541 33,688,8337

hr标签是单独使用的标签,是水平线标签,用于段落与段落之间的分隔,使文档结构清晰明了,使文字的编排更整齐
通过设置<hr>标签的属性值,可以控制水平分隔线的样式。

<hr>属性:
size: 设置水平分隔线的高度,单位:像素 默认值是2
width: 设置水平分隔线的宽度, 单位:像素 % 默认值是100%
align: 设置水平分隔线的对齐方式。 默认值是center 还有left right
color: 设置水平分隔线的颜色。 默认值是black
noshade: 取消水平线的3d阴影

例:

  1. <hr size="1" width="300" />

显示效果如下:

HTML 中hr标签属性及虚线

如果想要垂直的线,可以这样来进行设置:
例:

  1. <hr size=50 color=red width=3 align=center>

效果如下:

HTML 中hr标签属性及虚线

我们经常也用<hr>来进行设置虚线,可由以下几种方法:

最简单一种:

  1. <hr width=150 style="border:1px dashed red; height:1px">

效果如下:

HTML 中hr标签属性及虚线

dashed为虚线的意思 red就是直接定义的颜色
还有一种:

  1. <hr style="BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted" color=blue size=1 width=80>

效果如下:

HTML 中hr标签属性及虚线

再一种就是利用css来进行控制:
例:

  1. <STYLE type=text/css>
  2. .dotline {
  3. BORDER-BOTTOM-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-TOP-STYLE: dotted
  4. }
  5. </STYLE>

而在使用时:

  1. <hr class=dotline color=green size=3 width=200>

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  0   博主  0   引用   1