垂直導(dǎo)航條是網(wǎng)頁設(shè)計中常見的一個元素，可以提供清晰、易懂的導(dǎo)航界面，提高網(wǎng)站導(dǎo)覽性。下面是一份自制的CSS垂直導(dǎo)航條展示：

.navbar {
width: 200px;
background-color: #333;
}
.navbar ul {
list-style: none;
padding: 0;
margin: 0;
}
.navbar li {
background-color: #444;
margin: 2px 0;
}
.navbar li:hover {
background-color: #555;
}
.navbar a {
color: white;
display: block;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
text-decoration: underline;
}

上述代碼中，navbar是導(dǎo)航條的整體樣式，設(shè)置了寬度和背景顏色。ul和li都是列表標簽，使導(dǎo)航條變成一個垂直列表。a標簽用于超鏈接，設(shè)為塊級元素以便設(shè)置寬度和高度。注意設(shè)置鼠標懸停時的樣式。

可以通過修改CSS樣式來創(chuàng)建不同款式的垂直導(dǎo)航條，如更改背景顏色、字體大小、高亮效果等。使用CSS垂直導(dǎo)航條可以提高用戶體驗，提高網(wǎng)站整體的美觀度和可用性。