左側(cè)垂直導(dǎo)航是網(wǎng)站常見的一種導(dǎo)航方式，今天我們來介紹一下如何利用CSS代碼實(shí)現(xiàn)。以下為示例代碼：

.nav {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
width: 200px;
background-color: #f2f2f2;
}
.nav__item {
margin: 10px 0;
padding: 5px;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #333;
border-radius: 5px;
}
.nav__item:hover {
background-color: #eee;
}

首先，我們創(chuàng)建一個(gè)容器元素 `.nav`，并將其設(shè)置為 `flex` 布局。設(shè)置 `flex-direction: column` 屬性使其垂直排列，`justify-content: center` 屬性可將 nav 內(nèi)容上下居中。`min-height` 屬性設(shè)置為 `100vh`，使其占據(jù)整個(gè)屏幕垂直高度。`width` 屬性設(shè)置為 `200px`，控制導(dǎo)航列寬度。 在 `.nav` 容器內(nèi)，我們創(chuàng)建導(dǎo)航項(xiàng) `.nav__item`，利用 `margin` 指定導(dǎo)航項(xiàng)之間的距離并定義圓角邊框。設(shè)置文字居中對(duì)齊及字體大小樣式等。 最后，我們添加懸停效果，當(dāng)鼠標(biāo)移動(dòng)到導(dǎo)航項(xiàng) `.nav__item` 上時(shí)，添加背景顏色。 這樣，我們就創(chuàng)建了一個(gè)簡(jiǎn)單的左側(cè)垂直導(dǎo)航欄，可以根據(jù)實(shí)際需求進(jìn)行修改和美化。