如何使用 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 class="logo lazy" src="/static/imghw/default1.png" data-src="https://bitlearners.com/wp-content/uploads/2024/06/BitLearners-logo-1.png" alt="如何使用 HTML 和 CSS 创建导航栏">

      <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 class="logo lazy" src="/static/imghw/default1.png" data-src="logo-url" alt="如何使用 HTML 和 CSS 创建导航栏">
  <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中文网其他相关文章！