您的位置:首页> 前端教程> HTML教程
文章导航

HTML <hr>水平线标签

2018-9-12 10:31| 作者: admin| 查看: 1516| 评论: 0|来自: 蚂蚁部落

<hr/>可以绘制一条水平线。

它是一个自闭和标签,在HTML5规范中,可以省略斜杠<hr>。

hr的英文全称是horizon(水平线)。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
p {
  width:380px;
}
</style>
</head>
<body>
  <h3>蚂蚁部落一</h3>
  <p>只有努力奋斗才会有美好的未来</p>
  <p>本站的url地址是www.softwhy.com</p>
  <hr />
  <h3>蚂蚁部落二</h3>
  <p>本站位于青岛市南区</p>
  <p>欢迎大家提供有益的建议与意见</p>
</body>
</html>

以上代码简单演示了<hr>元素的效果。

默认情况下,<hr>貌似带有阴影效果,所以出现这种现象是因为默认条件下,<hr>的高度是两个像素,这两个像素是由上边框和下边框组合而成的,之所以会出现阴影效果,是因为上边框和下边框的颜色是不同的,上边框是黑色,下边框为灰色,所以只要随便将一个边框设置为none,那么就不会出现阴影效果。

代码修改如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
p {
  width:380px;
}
hr{border-bottom:none;}
</style>
</head>
<body>
  <h3>蚂蚁部落一</h3>
  <p>只有努力奋斗才会有美好的未来</p>
  <p>本站的url地址是www.softwhy.com</p>
  <hr />
  <h3>蚂蚁部落二</h3>
  <p>本站位于青岛市南区</p>
  <p>欢迎大家提供有益的建议与意见</p>
</body>
</html>

对比一下第一个例子的hr显示效果,应该会明显发现两者区别。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部