精心设计且功能齐全的导航栏（navbar）是任何网站的关键组件之一。它充当用户的路线图，帮助他们浏览各个页面。导航栏通常位于网页的顶部，用户始终可以看到它来访问关键链接。在本文中，我们将探讨如何使用 HTML 和 CSS 创建一个具有视觉吸引力和功能性的 CSS 导航栏。我们还将讨论确保导航栏保持在页面顶部的各种技术。

您可以查看此导航栏的现场演示，并通过访问 CodePen 上的预览来探索其功能。

以下代码片段演示了如何创建带有徽标、菜单项和号召性用语按钮的响应式导航栏。 HTML 和 CSS 代码如下：

分解代码
让我们仔细看看如何使用 HTML 和 CSS 创建导航栏。

HTML结构

代码的 HTML 部分很简单。它由一个 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属性。这允许导航栏保持固定在顶部 (top: 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)、白色文本和圆角(border-radius: 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;
}