水平线
已发表: 2021-09-01有很多方法可以让您的 HTML 页面看起来更漂亮、结构更合理。 更具体地说，水平线可以在使您的网站内容平衡、更清晰和更易于浏览方面发挥特殊作用。 每当我们决定在我们的网站上进行一些重大更改时，诸如线条之类的微小事物都会有所作为。 这些小事使您网站的信息更加全面。 此外，它们可以改变您的网络资源的视觉吸引力以及您的受众对您的数据的看法。
但是您也可以创建自定义线条以适合您的网页，并让您更好地掌握您在页面上操作的空间。 话虽如此，让我们仔细看看如何在 HTML 页面中自定义水平线。水平线是用作网页装饰的 HTML 元素。 但是，它也可以用于许多其他目的，例如：
- 一个分隔符，在视觉上划分您的内容的不同部分，并强调一个想法结束和另一个开始的地方。
- 突出网页中某些有意义的部分的荧光笔。
- 水平线被认为是在网站上实现各种目的的最流行和最简单的方法之一。 虽然乍一看可能很简单，但它是一个多功能元素，您可以根据您的具体要求进行调整。 通过对网页 HTML 代码的简单修改，您可以调整水平线的以下规格：
长度;
宽度;
颜色;
结盟。
还值得指出的是，水平线指的是块元素。 这意味着它被放置在网页上的单独一行上，并且您在该行旁边添加的文本将放在它的下方。
水平线在将你的页面分成不同的部分时非常有用，要添加一个简单的水平线，只需键入 <hr>，你会得到：
如何创建水平线
您可以使用简单的 < hr > 标签设置一行。 它是“Horizontal Rule”的缩写，设置经典的外部参数。 它与许多其他的不同之处在于它不需要结束标签并且可以独立存在。 您可以使用标签中的附加值更改元素的外部特征：
它看起来像这样。 例如，如果我们想要一个 100 像素的长度，我们会设置一个这样的标签：hr width = "100.
结盟。
您可以在左边缘或右边缘对齐线条，也可以在中心对齐。 此功能仅在您已指定宽度参数时才有效，因为整页行无法对齐。 对于对齐，在“align”标签中设置一个附加属性并为其添加一个方向：center - 用于中心，left - 用于左和 right - 用于右对齐。 在这种情况下，完成的标签将如下所示：如果我们需要为长度为 150 像素的水平线设置中心对齐，那么完成的标签将如下所示： hr align = "center" width = " 150"。 请注意，对齐度量“align”位于位置 1，即使该属性取决于长度度量宽度。宽度。
或者，您还可以指定宽度，创建粗体或细下划线。 此标准不依赖于任何东西，并且可以独立使用而无需指定长度或对齐方式。 为此，我们使用标签中的 size 属性和一个等于所需宽度（以像素为单位）的数值。 该数字在 size 属性和“=”符号后用引号表示。
因此，如果我们需要创建一条 15 像素宽的线，我们需要创建以下标签：hr size = "15"。
颜色。
它也被设置为一个独立的指标。 要更改它，请以代码或英文的形式将颜色属性与颜色名称结合使用。 颜色在“=”符号后用引号表示。
因此，标准白线的标记可以用两种方式编写：hr color = "#FFFFFF" 或 hr color = "white"
黑色可以使用代码#000000创建。
如何制作彩色水平线？
水平线适用于将一个文本块与另一个文本块分开。 顶部和底部带有水平线的小文本比普通文本更能吸引读者的注意力。
使用 <hr> 标签，您可以绘制一条水平线，其外观取决于所使用的属性以及浏览器。 标签指的是块元素，因此该行总是从新行开始，之后，所有元素都显示在下一行。 由于 <hr> 标签的许多属性，通过这个标签创建的行很容易操作。 结合样式的强大功能，在文档中添加一行是轻而易举的事。
默认情况下，线条显示为灰色并带有音量效果。 这种类型的线条并不总是适合网站的设计，因此开发人员希望通过样式来改变线条的颜色和其他参数是可以理解的。 但是，浏览器对这个问题很模糊，这就是为什么您必须同时使用多个样式属性的原因。 特别是，旧版本的 Internet Explorer 使用 color 属性作为线条颜色，而其他浏览器使用背景颜色。 但这还不是全部，在这种情况下，一定要指定一个非零的线条粗细（高度属性），并通过将边框属性设置为无来移除线条周围的边框。 将 hr 选择器的所有属性放在一起，我们得到了流行浏览器的通用解决方案。
< ! DOCTYPE html><html><head><meta charset="utf-8"><title>横线颜色</title><style>hr{border:none; /* 移除边框 */ background-color: red; /*线条颜色*/颜色：红色； /* IE6-7 的线条颜色 */ 高度：2px; /*线宽*/}</style></head><body><hr><p>文本字符串</p><hr></body></html>例子：
这个：
< hr 颜色="#c7c34c" size="2" width="50%" >给出了这个：
颜色： 线条颜色：
< hr 颜色="#c7c34c" size="2" width="50%" >尺寸：以像素表示的线高：
<小时大小=“x”>宽度：以百分比 (%) 或像素表示的线条宽度（在我的示例中为原始大小的 50%）：
<hr width="x%"> 或 <hr width="x" >更先进：
这个：
<小时宽度=“400”颜色=“#000000”尺寸=“4”>给出：
在这种情况下，我们使用了样式：
边框宽度为 3pixels (3 px)
它被点缀
底色为黑色：#000000
蓝色圆点：#0099CC
最后一个例子来解释更多，如果仍然需要;）：
这个
<小时宽度=“400”颜色=“#FFFFFF”尺寸=“6”>给出：
在上面的这种情况下：
边框宽度为 2pixels (2 px)
它是虚线的
基色为白色：#FFFFFF
银色破折号：#C0C0C0
可能的样式有：
- 点缀
-虚线
-坚硬的
-双倍的
-槽
-一开始
-插图
-岭
这就是我要说的关于水平线的全部内容！