CSS代碼中有一種常見的樣式——豎條樣式。它可以用來為網(wǎng)頁添加分欄、分界線、注釋等效果。這里是一個豎條樣式的代碼示例：

.vertical-bar {
width: 2px;
height: 20px;
background-color: #ccc;
display: inline-block;
margin: 0 5px;
}

首先，我們定義了一個類名為.vertical-bar的樣式。接下來，我們使用了以下屬性：

• width：設(shè)置豎條的寬度為 2 像素。
• height：設(shè)置豎條的高度為 20 像素。
• background-color：設(shè)置豎條的背景顏色為 #ccc，也就是淺灰色。
• display：設(shè)置豎條的顯示方式為inline-block，使得它既有塊級元素的特點(diǎn)（可以設(shè)置寬高），又有行內(nèi)元素的特點(diǎn)（可以和文本同行顯示）。
• margin：設(shè)置豎條的左右外邊距為 5 像素，這樣可以讓它不會貼住其他元素。

使用這個樣式很簡單，只需在需要豎條的地方添加一個帶有.vertical-bar類名的元素即可：

<p>這是一段文字<span class="vertical-bar"></span>這是另外一段文字</p>

這樣，就會在這兩段文字中間出現(xiàn)一個豎條，美觀而實用。