html水平线与虚线用法举例

发布时间:2020-05-24编辑:脚本学堂
本文介绍了html中水平线hr的用法,使用css定义水平线样式的一些例子,有需要的朋友参考下。

有关html标签之hr水平线的用法。

hr水平线标签
例1,定义hr水平线样式。
 

复制代码 代码示例:
<html>
<head><title>水平线样式--www.jb200.com</title></head>
<body>
<p>一条没有阴影粗细为5像素,宽为整个文档一般的居中的水平线
</p>
<hr noshade size=5 align=center width=50%>
</body>
</html>
 

<hr>属性:
 

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

例2:

复制代码 代码示例:
<hr size=1 color=red width=300>

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

例3:
 

复制代码 代码示例:
<hr size=50color=red width=3 align=center>
 

经常也用<hr>来进行设置虚线
可由以下几种方法:
最简单一种,例4:
 

复制代码 代码示例:
<hr width=150 style="border:1px dashed red; height:1px">
<hr style="border: 1px dashed #ccc; width: 100%; height: 1px;" />

dashed为虚线的意思 red就是直接定义的颜色。相关阅读:hr 水平线样式示例
还有一种,例5:
 

复制代码 代码示例:
<hr style="border-bottom-style: dotted; border-left-style: dotted; border-right-style: dotted; border-top-style: dotted" color=blue size=1 width=80>

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

复制代码 代码示例:
<style type=text/css>
.dotline {
border-bottom-style: dotted; border-left-style: dotted; border-right-style: dotted; border-top-style: dotted
}
</style>

而在使用时:
 

复制代码 代码示例:
<hr class=dotline color=green size=3 width=200>