在網頁設計中，導航欄是一個十分重要的組成部分。它能夠讓用戶快速地找到所需信息，為用戶的操作提供便利。而在眾多不同類型的導航欄中，左邊導航欄的運用頻率也越來越高。接下來，我們就來看一下如何用CSS來制作左邊導航欄。

<div class="sidebar">
<ul class="nav">
<li class="active"><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</div>
.sidebar {
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #f2f2f2;
}
.nav {
list-style: none;
padding: 0;
margin: 0;
}
.nav li {
margin: 0;
}
.nav li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
.nav li.active a {
background-color: #ff5a5f;
color: #fff;
}
.nav li:hover a {
background-color: #ddd;
color: #333;
}

首先，我們使用外層的<div>標簽來包裹導航欄，設置它的寬度、高度、位置等屬性。接下來，在<div>標簽中使用一個<ul>標簽來包含導航欄中的各個選項。我們可以根據需要添加不同個數的<li>標簽，在其中使用<a>標簽來進行鏈接。

在CSS樣式中，我們使用了.list-style: none;來去除了Li標簽的默認樣式（無序列表）,并設置了padding和margin為0。同時，我們只需要給每個選項中的<a>標簽設置樣式，通過修改其padding、背景色、文字顏色等等屬性，實現左邊導航欄的設計。 在<li>標簽中，我們也可以通過為選中或移動到的選項添加.active或:hover選擇器來實現樣式效果。

通過以上代碼，我們可以輕松地實現左邊導航欄的設計，幫助用戶更為便捷地瀏覽我們的網站。