HTML 水平线<hr>标签

HTML 水平线<hr>标签,第1张

HTML 水平线<hr/>标签

定义和用法:

<hr/>标签在HTML页面中创建一条水平线。


水平分隔线(horizontal rule)可以在视觉上将文档分隔成各个部分。


HTML 与 XHTML 之间的差异

在 HTML 中,<hr> 标签没有结束标签。


在 XHTML 中,<hr> 必须被正确地关闭,比如 <hr />。


在 HTML 4.01 中,hr 元素的所有呈现属性均不被赞成使用。


在 XHTML 1.0 Strict DTD 中,hr 元素的所有呈现属性均不被支持。


所以,请使用样式来改变它的它的属性。


html中hr的各种样式使用

第一种:虚线  dotted(来自 dot (点),由 dot 组成的虚线,也称点线 )

<hr style=" height:2px;border:none;border-top:2px dotted #185598;" />

height:2px;是hr的高度

border:none;是没有边框

border-top:2px dotted #185598;是设置横线的样式

dotted  虚线  #185598  颜色


第二种:虚线 dashed (来自 dash(破折号),由 dash 组成的虚线 )

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />


第三种:实线  solid 

<hr style="height:1px;border:none;border-top:1px solid #555555;"/>


第四种: 双实线  double

<hr style="height:3px;border:none;border-top:3px double red;" />


 第五种:脊线式边框  ridge

<hr style="height:5px;border:none;border-top:5px ridge green;" />


 第六种:groove(上颜色)和   skyblue(下颜色)

<hr style="height:10px;border:none;border-top:10px groove skyblue;" />


第七种:竖线  

<hr style="height:100px; width:4px" color=“orange”>

<hr style="filter:alpha(opacity=100,finishopacity=5,style=2); height:100px; width:5px" color=“navy”>

<hr style="filter:alpha(opacity=0,finishopacity=100,style=2);height:100px; width:4px" color=“red”>




HR标签在不同浏览器的默认边距问题:

在加了hr后,在ie下面会有默认的6px的边距,通过修改了margin:-6px;后仍然能解决,但是firefox下面却发现,hr提上去了,很不和谐。


解决方法

hr{ margin:0px; *margin:-6px;}

解释:

当ie下面解析的时候,会解析margin:-6px;所以ie下面显示正常

当在firefox下面解析的时候会解析margin:0px; 所以firefox下面也会解释正常

css控制水平衡线hr标签样式去掉其阴影效果

html中水平衡线hr默认高度是两个像素,其中border-top高1px,且颜色为黑,border-bottom高1px颜色为灰,这时看着是阴影效果

去掉阴影效果很简单,只需在css里把border-bottom或border-top属性设置一个为none即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/587308.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-12
下一篇 2022-04-12

发表评论

登录后才能评论

评论列表(0条)

保存