在網(wǎng)頁設(shè)計中，左側(cè)導(dǎo)航欄是一種常見的布局元素。CSS提供了多種方式來實現(xiàn)左側(cè)導(dǎo)航欄，下面是其中一種比較簡單的實現(xiàn)方式。

/*HTML*/
<div id="container">
<ul id="nav">
<li><a href="#">導(dǎo)航1</a></li>
<li><a href="#">導(dǎo)航2</a></li>
<li><a href="#">導(dǎo)航3</a></li>
<li><a href="#">導(dǎo)航4</a></li>
</ul>
<div id="content">
<p>頁面內(nèi)容</p>
</div>
</div>
/*CSS*/
#container {
display: flex;
}
#nav {
flex: 1;
list-style: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
#nav li {
border-bottom: 1px solid #ccc;
}
#nav li a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
#nav li a:hover {
background-color: #ccc;
}
#content {
flex: 4;
padding: 20px;
}

上面的代碼中，左側(cè)導(dǎo)航欄使用了一個無序列表（ul）來實現(xiàn)，給ul設(shè)置list-style: none去掉了默認的列表樣式。每一個導(dǎo)航項使用列表項（li）來實現(xiàn)，給列表項設(shè)置border-bottom屬性創(chuàng)建了分隔線，a標簽的display屬性設(shè)置為block讓鏈接顯示為塊級元素，方便設(shè)置padding屬性。在鼠標移動到鏈接上時，a:hover屬性會改變鏈接背景色。

除了導(dǎo)航欄外，頁面的內(nèi)容區(qū)域使用了一個div元素來實現(xiàn)，設(shè)置了padding屬性為20像素。使用flex布局，#nav元素的flex屬性為1，#content元素的flex屬性為4，使左側(cè)導(dǎo)航欄占據(jù)較小的空間，內(nèi)容區(qū)域占據(jù)較大的空間，實現(xiàn)了左側(cè)導(dǎo)航欄和主體內(nèi)容的分離與平衡。