在網站的設計過程中，導航欄是不可或缺的一個組件。而導航欄的位置也是設計中需要考慮的一項因素。導航欄在左側的設計方式越來越受到設計師們的青睞。下面我們來看看如何使用CSS實現導航欄在左側。

/*設置導航欄的樣式*/
.navbar {
width: 200px; /*設置導航欄的寬度 */
background-color: #f5f5f5; /*設置導航欄的背景色*/
position: fixed; /*設置導航欄的位置為固定*/
top: 0; /*設置導航欄距離頂部的距離*/
left: 0; /*設置導航欄距離左側的距離*/
height: 100vh; /*設置導航欄的高度為100%*/
}
/*設置導航欄的列表樣式*/
.navbar ul {
list-style: none; /*去掉列表樣式*/
padding: 0; /*去除padding*/
margin: 0; /*去除margin*/
}
/*設置導航欄的鏈接樣式*/
.navbar a {
display: block; /*將鏈接設置為塊級元素*/
padding: 10px; /*設置鏈接的內邊距*/
text-decoration: none; /*去除下劃線*/
color: #333; /*設置鏈接的顏色*/
}
/*設置當前鏈接的樣式*/
.navbar a.current {
background-color: #ccc; /*設置當前鏈接的背景色*/
}

使用以上CSS代碼可以輕松地實現導航欄在左側的樣式。其中，我們設置了導航欄的寬度、背景色、位置、高度等樣式，同時也設置了導航欄中列表與鏈接的樣式。通過這些設置，我們可以創建出一個美觀且實用的導航欄。