豎向?qū)Ш綑谑蔷W(wǎng)頁設(shè)計中常見的一種導(dǎo)航形式。它通常呈現(xiàn)為一列鏈接，以垂直方式顯示。CSS可以使我們實現(xiàn)各種不同樣式的豎向?qū)Ш綑凇?/p>

/* 簡單的豎向?qū)Ш綑?*/
.nav {
display: flex;
flex-direction: column;
}
.nav a {
padding: 10px;
text-decoration: none;
color: #333;
}
/* 鼠標(biāo)懸停時改變背景色 */
.nav a:hover {
background-color: #eee;
}
/* 在背景上添加圖標(biāo) */
.nav a:before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
background-image: url(icon.png);
background-size: cover;
}
/* 被選中的導(dǎo)航鏈接樣式 */
.nav a.active {
background-color: #ddd;
}

以上代碼實現(xiàn)了一個簡單的豎向?qū)Ш綑冢溄又g以垂直方式排列，鼠標(biāo)懸停時改變背景顏色，鏈接前面放置了一個圖標(biāo)。通過定義.active類，我們還可以定義選中鏈接的樣式。

還可以實現(xiàn)更多復(fù)雜的樣式，比如有子菜單的導(dǎo)航欄、帶有分割線的導(dǎo)航欄等等。對于使用豎向?qū)Ш綑谶M行網(wǎng)站開發(fā)和設(shè)計的開發(fā)人員來說，掌握好CSS樣式的使用是非常重要的。