CSS導航欄是網站設計中非常重要的一部分，它能夠讓用戶更方便地瀏覽網頁內容。本文將介紹如何使用CSS實現一個簡單的導航欄。

/* HTML 代碼 */
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品介紹</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>
/* CSS 代碼 */
nav {
background-color: #f5f5f5; /* 背景色 */
height: 50px; /* 高度 */
padding: 0 10px; /* 內邊距 */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 陰影 */
}
ul {
list-style: none; /* 去除列表樣式 */
margin: 0;
padding: 0;
display: flex; /* 使用彈性盒模型布局 */
}
li {
margin-right: 20px; /* 間距 */
line-height: 50px; /* 行高與導航欄高度一致 */
}
a {
text-decoration: none; /* 去除下劃線 */
color: #333; /* 顏色 */
font-weight: bold; /* 文字加粗 */
}
a:hover {
color: #ff6600; /* 鼠標懸停時的顏色 */
}

我們首先在HTML代碼中創建一個nav元素，里面包含一個無序列表ul，每個列表項li又包含一個超鏈接a，這就是我們的導航欄基本結構了。

接下來，我們使用CSS對導航欄進行樣式設置。例如，我們設置導航欄的背景色、高度、內邊距和陰影。我們使用flex布局對ul進行定位，然后對li設置間距和行高，最后對超鏈接a設置顏色和文字加粗。

這就是一個簡單的CSS導航欄的制作過程。通過CSS樣式設置，我們可以輕松地實現多種樣式和效果的導航欄，更好的優化用戶體驗和網站設計。