html中hr的各种样式使用_教程

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

创建一条水平线

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

hr的高度

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

没有边框

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

dotted 虚线

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

- - 好吧，我终于懂你的意思了，你好，又是我......

先看如下代码：

<!DOCTYPE html>

<html>

<body>

</div>

</body>

</html>

这段代码是让这两个线悬浮在页面上，可以调到任意高度，不会影响页面的打印内容。

要注意的是：

一定要加最上面的<!DOCTYPE html>，这是为了防止IE不兼容，其它浏览器可以不加

看到上面两个hr外面的div了吗？style里有个top:300px，这个就是调整两条线在页面上的位置的，因为我不知道你页面的具体高度，所以不知道中间的位置在哪，你可以根据需要，调整top后面的数值来放到中间，比如改成top:500px

div里的style一个都不要少哦

好了，你把这个加到你页面上试试吧。

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

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

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

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

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

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

欢迎分享，转载请注明来源：内存溢出

html中hr的各种样式使用