如何使用 HTML 和 CSS 建立導覽列

精心設計且功能齊全的導覽列（navbar）是任何網站的關鍵組件之一。它充當用戶的路線圖，幫助他們瀏覽各個頁面。導覽列通常位於網頁的頂部，使用者始終可以看到它來存取關鍵連結。在本文中，我們將探索如何使用 HTML 和 CSS 建立一個具有視覺吸引力和功能性的 CSS 導覽列。我們還將討論確保導航列保持在頁面頂部的各種技術。

您可以查看此導覽列的現場演示，並透過造訪 CodePen 上的預覽來探索其功能。

以下程式碼片段示範如何建立帶有標誌、選單項目和號召性用語按鈕的回應式導覽列。這是 HTML 和 CSS 程式碼：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar</title>
    <style>
      body {
        background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
        height: 100vh;
        margin: 0;
        padding-top: 10px;
      }

      .navbar {
        display: flex;
        background: #fff;
        border-radius: 30px;
        padding: 10px 20px;
        margin: 0 auto;
        width: 95%;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
      }

      .logo {
        width: 12rem;
      }

      .menu {
        display: flex;
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .item {
        margin: 0 15px;
      }

      .item a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

      .item a:hover {
        color: #2258c3;
      }

      button {
        background-color: #2258c3;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      button:hover {
        background-color: #fd2df3;
      }
    </style>
  

  
    <nav class="navbar">
      <img src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="如何使用 HTML 和 CSS 建立導覽列" class="logo">

      <ul class="menu">
        <li class="item"><a href="#">Home</a></li>
        <li class="item"><a href="#">About Us</a></li>
        <li class="item"><a href="#">Contact Us</a></li>
        <li class="item"><a href="#">Blog</a></li>
      </ul>

      <button type="submit">Call Now</button>
    </nav>
  

分解代碼
讓我們仔細看看如何使用 HTML 和 CSS 建立導覽列。

HTML結構

程式碼的 HTML 部分很簡單。它由一個 nav 元素組成，該元素包含三個主要組件：

• 標誌（圖片）
• 有可點擊連結的**選單**清單（主頁、關於我們、聯絡我們、部落格）
• 一個**按鈕**，充當號召性用語（立即致電）
• 該結構被包裝在一個元素內，該元素充當導覽列的容器。

<nav class="navbar">
  <img src="logo-url" alt="如何使用 HTML 和 CSS 建立導覽列" class="logo">
  <ul class="menu">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About Us</a></li>
    <li class="item"><a href="#">Contact Us</a></li>
    <li class="item"><a href="#">Blog</a></li>
  </ul>
  <button type="submit">Call Now</button>
</nav>

標誌是使用 標籤建立的。選單是一個無序列表(

)

，其中包含列表項目(

)

，每個列表項目都有錨標記 () 建立到不同頁面的連結。最後，按鈕是一個帶有樣式的簡單標籤。

使用 CSS 設計樣式

神奇的事情發生在 CSS 部分，我們在其中定義導覽列的佈局和外觀。讓我們討論一些關鍵要素。

背景與身體造型
主體具有從藍色 (#2258c3) 過渡到粉紅色 (#fd2df3) 的漸變背景。高度設定為 100vh（視窗高度），這可確保背景填滿整個螢幕，並且沒有邊距以避免頁面周圍不必要的空間。

body {
  background: linear-gradient(0deg, #2258c3 10%, #fd2df3 90%);
  height: 100vh;
  margin: 0;
  padding-top: 10px;
}

導覽列樣式

導覽列有白色背景和圓角（邊框半徑：30px）。內邊距和邊距在導覽列內部和外部建立間距。 display: flex 屬性使導覽列成為彈性框，允許其子元素水平對齊。 justify-content: space- Between 確保標誌、選單和按鈕均勻分佈。

.navbar {
  display: flex;
  background: #fff;
  border-radius: 30px;
  padding: 10px 20px;
  margin: 0 auto;
  width: 95%;
  justify-content: space-between;
  align-items: center;
}

將導覽列固定到頂部

導覽列的關鍵功能之一是在捲動時保持在頁面頂部。為了實現這一點，我們使用position:fixed屬性。這允許導航列保持固定在頂部（頂部：0），無論滾動如何。此外，z-index: 9999 確保導覽列始終位於頁面上其他元素的上方。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

選單項目和互動性

使用 .menu 類別上的 display: flex 水平顯示選單項目。這些項目透過邊距指定間距，並且每個項目的樣式都設定為刪除預設清單樣式和填滿。選單項目中的連結沒有文字裝飾，並採用粗體和深色樣式。

連結上的懸停效果會更改顏色以匹配藍色背景顏色(#2258c3)，提供連結是互動的視覺提示。

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item {
  margin: 0 15px;
}

.item a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.item a:hover {
  color: #2258c3;
}

按鈕樣式

按鈕的樣式為藍色背景(#2258c3)、白色文字和圓角（邊框半徑：20px）。懸停時，背景會變成粉紅色 (#fd2df3) 以符合背景中的漸層。

button {
  background-color: #2258c3;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
}

button:hover {
  background-color: #fd2df3;
}

如何保持導覽列始終位於頂部

要使用 CSS 將標題固定在頁面頂部，請使用position:fixed 屬性和 top:0。這可確保導覽列在使用者捲動時保持在頂部。以下是它在程式碼中的應用方式：

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

以上是如何使用 HTML 和 CSS 建立導覽列的詳細內容。更多資訊請關注PHP中文網其他相關文章！