CSS代碼中有一種常見的樣式——豎條樣式。它可以用來為網頁添加分欄、分界線、注釋等效果。這里是一個豎條樣式的代碼示例:
.vertical-bar { width: 2px; height: 20px; background-color: #ccc; display: inline-block; margin: 0 5px; }
首先,我們定義了一個類名為.vertical-bar
的樣式。接下來,我們使用了以下屬性:
width
:設置豎條的寬度為 2 像素。height
:設置豎條的高度為 20 像素。background-color
:設置豎條的背景顏色為 #ccc,也就是淺灰色。display
:設置豎條的顯示方式為inline-block
,使得它既有塊級元素的特點(可以設置寬高),又有行內元素的特點(可以和文本同行顯示)。margin
:設置豎條的左右外邊距為 5 像素,這樣可以讓它不會貼住其他元素。
使用這個樣式很簡單,只需在需要豎條的地方添加一個帶有.vertical-bar
類名的元素即可:
<p>這是一段文字<span class="vertical-bar"></span>這是另外一段文字</p>
這樣,就會在這兩段文字中間出現一個豎條,美觀而實用。