CSS中的導航欄是網站或應用程序的重要組成部分。固定左側導航欄是網站設計中最常見的一種。導航欄可以幫助用戶快速定位信息并導航到所需頁面。本文將介紹如何使用CSS來創建固定左側導航欄。

nav{
position:fixed; /*使導航欄固定*/
top:0;
left:0;
height:100%;
width:200px;
background-color:#222;
color:#fff;
padding:10px;
box-sizing:border-box;
}
nav ul{
list-style:none; /*去掉列表的小圓點*/
padding:0;
margin:0;
}
nav li a{
display:block; /*將a標簽轉換為塊元素，使其占據整個寬度*/
color:#fff;
text-decoration:none;
padding:10px 0;
text-align:center; /*文本居中*/
}
nav li a:hover{
background-color:#fff;
color:#222;
}

首先，在nav元素上應用position: fixed屬性以使導航欄固定在頁面左側。接下來，我們設置導航欄的高度和寬度，并設置盒模型使用border-box屬性。

在nav元素內添加ul和li元素并設置樣式。我們去掉小圓點并設置為0。然后設置錨元素（a標簽）的樣式，使其轉換為塊元素并加上padding的值作為上下左右的膨脹空間，同時將其文本居中對齊，顏色設置為白色。

最后，為了鼠標懸停時產生的交互效果，我們設置導航欄列表項上a標簽的:hover樣式，將背景顏色和字體顏色設置為白色和黑色。

通過這些CSS細節設置，我們可以在左側創建一個優雅的導航布局，提高網站或應用程序的用戶體驗和整體設計美感。