html中hr的各种样式使用

HTML的hr标签可以创建一条水平线。下面，我们来看看html中hr的各种样式使用吧。

01

创建一条水平线

先使用<hr/>标签来创建一条水平线，如下图所示：

02

hr的高度

使用style来设置hr水平线的样式，比如设置hr的高度， <hr style=" height:30px" />。如下图所示：

03

没有边框

使用border:none来设置hr没有边框，如下图所示：

04

dotted 虚线

使用dotted将水平线设置成虚线，如下图所示：

用input页面标签

并将下Border设为直线

style

input[type="text"]{border-bottom:solid 1px #ccc}

style

input type="text"/

或

输出一条横线用：hr如果想让它长点就改变它的样式：hr style="width:1000PX"变长和粗：hr style="width:1000PXheight:20px"其中width 是宽（长），height是高（粗细）。

需要准备的材料分别有：电脑、chrome浏览器、html编辑器。

1、首先打开html编辑器，新建一个html文件，例如：index.html。

2、其次，在index.html的body标签中，添加代码：hr/。

3、浏览器运行index.html页面，此时成功在html中画了一条线。

1、首先新建html文档，输入html5标准声明，如图所示。

2、然后输入html基本网页结构，如图所示。

3、接着输入hr标签<hr>是水平线，是单边标记，如图所示。

4、hr标签的常用属性，Size：设置水平线的粗细。

5、Width：设置水平线的宽度， Color：设置水平线的颜色，noshade：纯色显示，不带阴影效果。

6、最后运行网页，查看效果，如图所示，就完成了。

---