水平線

已發表: 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%）：

更先進：

這個：

<小時寬度=“400”顏色=“#000000”尺寸=“4”>

給出：

在這種情況下，我們使用了樣式：

邊框寬度為 3pixels (3 px)

它被點綴

底色為黑色：#000000

藍色圓點：#0099CC

最後一個例子來解釋更多，如果仍然需要;）：

這個

<小時寬度=“400”顏色=“#FFFFFF”尺寸=“6”>

給出：

在上面的這種情況下：

邊框寬度為 2pixels (2 px)

它是虛線的

基色為白色：#FFFFFF

銀色破折號：#C0C0C0

可能的樣式有：

- 點綴

-虛線

-堅硬的

-雙倍的

-槽

-一開始

-插圖

-嶺

這就是我要說的關於水平線的全部內容！