在網(wǎng)頁構(gòu)建中，導航欄是非常重要的一個元素，通常用來分割并鏈接到網(wǎng)站的不同部分。使用CSS可以更加方便地設(shè)計和布局導航欄。

下面是一個簡單的CSS導航欄示例:

<ul>
<li><a href="#">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact us</a></li>
</ul>
<style>
ul {
list-style: none; /* 去除默認列表樣式 */
margin: 0; /* 去除外邊距 */
padding: 0; /* 去除內(nèi)邊距 */
background-color: #333; /* 背景顏色 */
overflow: hidden; /* 清除浮動 */
}
li {
float: left; /* 水平排列 */
border-right: 1px solid #bbb; /* 分割線 */
}
li:last-child {
border-right: none; /* 去除最后一個li的分割線 */
}
a {
display: block; /* 塊元素，占據(jù)整個li的空間 */
color: white;
text-align: center;
padding: 14px 16px; /* 文本與邊框的距離 */
text-decoration: none;
}
a:hover {
background-color: #111; /* 鼠標懸停時的背景顏色 */
}
</style>

通過使用CSS樣式可以實現(xiàn)導航欄的基本布局和樣式，使其更加直觀和易于使用。