資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何將水平線分成多個部分？
在 HTML 中，<hr> 標籤代表 水平線，最常顯示為用於分隔內容（或定義更改）的水平線 HTML 頁面。<hr> 標籤是一個空標籤，不需要後跟閉合標籤。以下是此標籤的語法 –
<hr> ...
它支援以下屬性
align: 它確定規則在頁面上的對齊方式（左/中/右）。如果未指定值，則使用預設值（左）。
color: 它使用顏色名稱或十六進位制值設定規則的顏色。
noshade: 它將規則設定為沒有陰影。
size: 它以畫素為單位設定規則的高度。
width: 它以畫素或百分比為單位設定規則的寬度。
示例
下面的示例顯示了 <hr> 標籤的預設行為。
<!DOCTYPE html>
<html>
<title>An example of horizontal rule</title>
<body>
<h3>It is a beautiful day</h3>
<hr>
There is a horizontal rule above this line.
</body>
</html>
但是，我們可以透過使用下面討論的某些 CSS 屬性將水平線分成多個部分。
CSS 屬性 Display
‘display’ CSS 屬性確定元素是作為塊元素還是內聯元素處理，以及用於其子元素的佈局，可以是流佈局、網格或彈性佈局。正式地，display 屬性指定元素的內部和外部顯示型別。
外部型別確定元素在流佈局中的參與；內部型別確定子佈局。
display: value;
一些重要的值包括：inline、block、contents、flex、grid、inline-block 等。
inline: 元素建立一個或多個內聯元素框，其前後沒有換行符。如果有空間，下一個元素將在普通流中的同一行上。
block: 在普通流中，元素生成一個塊元素框，在元素前後都生成換行符。
contents: 容器被移除，並且 DOM 中上一級元素的子元素被替換。
flex: 元素表現為塊元素，並使用彈性盒模型排列其內容。
grid: 元素表現為塊元素，並使用網格模型排列其內容。
inline-block: 元素建立一個塊元素框，該框與周圍內容一起流動，就像它是一個單獨的內聯框一樣（行為與替換元素非常相似）。
使用 border-top 屬性的虛線值
‘border-top’ 簡寫屬性將所有頂部邊框屬性連線到一個宣告中。必須按以下順序設定以下屬性
border-top-width
border-top-style (必需) (必需)
border-top-color
如果未指定 border-top-color，則使用的顏色將是文字顏色。
語法
border-top: border-width border-style border-color
其中，
border-width: 它設定元素頂部邊框的寬度。
border-style: 它設定元素頂部邊框的樣式（點狀/虛線/實線/隱藏…）。
border-style: 它設定元素頂部邊框的樣式（點狀/虛線/實線/隱藏…）。
示例
此示例在 <hr> 元素上使用 border-top 屬性及其“dashed”值，並將水平線分成多個部分。
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
hr {
border-top: 4px dashed thistle;
}
p{
background-color:lavenderblush;
padding:5px 4px 4px 10px;
color:rebeccapurple;
font-size:18px;
border:1px solid purple;
}
</style>
</head>
<body>
<hr>
<h2>A Life Lesson</h2>
<hr>
<p>
The unhappiest people are often those who care the most about what everyone else thinks. There is great freedom in leaving others to their opinions. And there is a huge weight lifted when you take nothing personally.
</p>
</body>
</html>
使用具有不同寬度的多個 <hr> 標籤
在此示例中，我們使用多個 <hr> 元素，並將 display 設定為“inline-block”，並將 border-top 設定為“solid”。然後我們設定每條水平線的所需寬度。
示例
<!DOCTYPE html>
<html>
<head>
<title>How to Divide a Horizontal Line into Multiple Parts?</title>
<style>
.inlineHR {
display: inline-block;
border-top: 4px solid mediumvioletred;
}
.hr1 {
width: 70px;
}
.hr2 {
width: 60px;
margin-left: 10px;
}
.hr3 {
width: 50px;
margin-left: 10px;
}
.hr4 {
width: 40px;
margin-left: 10px;
}
.hr5 {
width: 30px;
margin-left: 10px;
}
p{
text-align:justify;
background-color:seashell;
}
</style>
</head>
<body>
<h2>CSS display property</h2>
<hr class='inlineHR hr1' />
<hr class='inlineHR hr2' />
<hr class='inlineHR hr3' />
<hr class='inlineHR hr4' />
<hr class='inlineHR hr5' />
<p>
The display CSS property determines whether an element is treated as a block or inline element, as well as the layout used for its children, which can be flow layout, grid, or flex. Formally, the display property specifies the inner and outer display types of an element. The outer type determines an element's participation in flow layout; the inner type determines child layout.
</p>
</body>
</html>
301 次檢視
