CSS 導航欄

演示：導航欄

垂直導航欄

水平導航欄


導航欄

易用的導航對于任何網站都很重要。

通過使用 CSS，您可以將無聊的 HTML 菜單轉換為美觀的導航欄。

導航欄 = 鏈接列表

導航欄需要標準 HTML 作為基礎。

在我們的實例中，將用標準的 HTML 列表構建導航欄。

導航欄基本上就是鏈接列表，因此使用 <ul> 和 <li> 元素會很有意義：

實例

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

親自試一試

現在，從列表中刪除項目符號以及外邊距和內邊距（填充）：

實例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

親自試一試

例子解釋：

  • list-style-type: none; - 刪除項目符號。導航條不需要列表項標記。
  • 設置 margin: 0; 和 padding: 0; 刪除瀏覽器的默認設置。

上例中的代碼是垂直和水平導航欄中使用的標準代碼，您將在下一章中學習更多內容。