今天我們來一起學習一下如何設計一個簡單的CSS導航欄。
首先，我們需要在HTML文件中創建一個ul元素，代表我們的導航欄。每個導航項會作為li元素的子元素，同時給每個li元素設置一個id屬性，以便后續的CSS樣式設置。

<ul>
<li id="nav-home">首頁</li>
<li id="nav-about">關于我們</li>
<li id="nav-contact">聯系我們</li>
</ul>

接著，我們可以為導航欄添加一些基本的樣式。比如設置導航欄的背景色、字體大小等。這些樣式可以在ul元素上設置。我們也可以為每個li元素設置一些樣式，如字體顏色、文字對齊等。

<style>
ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
<br>
    li {
float: left;
}
<br>
    li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<br>
    li a:hover {
background-color: #111;
}
</style>

最后，為每個導航項添加鏈接。我們可以通過給每個li元素下的a元素設置href屬性來實現。在這里，我們還可以為每個導航項的鏈接設置一些樣式，如標簽的顏色、字體樣式等。
最終的代碼如下所示：

<ul>
<li id="nav-home"><a href="#">首頁</a></li>
<li id="nav-about"><a href="#">關于我們</a></li>
<li id="nav-contact"><a href="#">聯系我們</a></li>
</ul>
<br>
  <style>
ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
<br>
    li {
float: left;
}
<br>
    li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<br>
    li a:hover {
background-color: #111;
}
</style>

到此為止，我們已經成功地完成了一個簡單的CSS導航欄的設計。希望這篇文章能對大家有所幫助！