CSS垂直左邊導航欄是網站開發中常用的一種布局方式，它可以在頁面左側呈現導航欄，方便用戶進行網站的導航。下面我們將介紹如何使用CSS實現一個簡單的垂直左邊導航欄。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">關于我們</a></li>
</ul>
</nav>
<style>
nav {
height: 100%;
width: 200px;
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
</style>

在上面的代碼中，我們首先定義了一個nav元素作為導航欄的容器，設置了它的高度、寬度、背景顏色以及位置等樣式。在nav元素中嵌套了一個ul元素，用于顯示導航欄的列表內容。在ul元素中定義了list-style為none，表示去掉列表的默認樣式。在ul中的每一個li元素中又嵌套了一個a元素，用于顯示每一個導航鏈接的標題。在a元素中設置了display屬性為block，使得它們都成為塊級元素，并設置padding、text-decoration等樣式。

通過以上代碼的設置，我們就可以實現一個簡單的垂直左邊導航欄，使得網頁的導航變得更加簡單和直觀。當然，在實際開發中，我們還可以根據實際需求對導航欄的樣式進行優化和增強。