CSS怎么加垂直的線 在網頁設計中，經常需要使用線條進行分割。有時候需要一條水平線，有時候需要一條垂直線。那么如何在CSS中加一條垂直的線呢？ Step 1. 創建一個 DIV 元素 首先我們需要創建一個 DIV 元素來承載我們的垂直線。可以給它任何的類名或 ID 值，便于我們在 CSS 中訪問它。

<div class="vertical-line"></div>

Step 2. 設置 DIV 元素的高度和寬度 一般情況下，在網頁設計中垂直線的高度會比較長，所以我們需要設置它的高度。同時，垂直線的寬度默認是0，我們需要設置它的寬度，否則垂直線是看不到的。

.vertical-line {
height: 100px;
width: 1px;
}

Step 3. 設置 DIV 元素的背景顏色 我們需要為 DIV 元素設置背景顏色，否則垂直線仍然是看不到的。通常情況下，我們會選擇跟網頁其他元素顏色相同，或者選擇比較明顯的顏色，使垂直線更加醒目。

.vertical-line {
height: 100px;
width: 1px;
background-color: #ccc;
}

Step 4. 設置 DIV 元素的位置 我們需要為 DIV 元素設置位置，讓它出現在垂直方向。我們可以使用 CSS 的 position 屬性來設置 DIV 元素的位置。此外，我們還需要為 DIV 元素的父元素設置 position 屬性，才能讓 DIV 元素的位置生效。

.container {
position: relative;
}
.vertical-line {
height: 100px;
width: 1px;
background-color: #ccc;
position: absolute;
left: 50%;
transform: translateX(-50%);
}

以上代碼中，我們在 .container 元素中設置了 position 屬性為 relative。在 .vertical-line 元素中，我們設置了 position 屬性為 absolute，意思是它的位置是相對于它的父元素來定位的。left 屬性設置為50%，表示它位于父元素的中間位置，而 transform 屬性則是把它向左偏移50%。 現在，我們已經成功地在網頁中創建了一條垂直線。你可以根據自己的需要，調整高度、寬度、顏色和位置，來滿足你的網頁設計需求。