在Web開發中，導航欄常常是網頁中不可或缺的元素之一。通過使用CSS可以輕松地制作出漂亮的樣式導航欄。

首先，我們可以使用HTML5中的

和
• 標簽作為導航欄的框架，例如：

  <ul>
  <li><a href="#">首頁</a></li>
  <li><a href="#">分類</a></li>
  <li><a href="#">標簽</a></li>
  <li><a href="#">聯系我們</a></li>
  </ul>

  接下來，我們可以使用CSS來美化導航欄。我們可以設置導航欄的樣式，如字體顏色，背景顏色等等。我們可以使用下面的CSS代碼為導航欄設置樣式：

  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
  }
  li {
  float: left;
  }
  li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  }
  li a:hover:not(.active) {
  background-color: #111;
  }
  .active {
  background-color: #4CAF50;
  }

  在上面的代碼中，我們使用CSS設置了導航欄的背景顏色為#333，設置了導航欄中每個選項的樣式，包括字體顏色、字體大小、內邊距等等。我們還設置了當鼠標懸停在導航欄選項上時的樣式，以及當選項被選中時的樣式。

  最終的效果如下：

  • 首頁
  • 分類
  • 標簽
  • 聯系我們

  使用CSS制作樣式導航欄非常簡單，只需要幾行代碼就可以實現。這可以給網站帶來更美觀、更專業的外觀，同時提高用戶的體驗和導航效率。