如何使用 HTML 和 CSS 创建导航栏

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

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

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

雷雷

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

HTML结构

代码的 HTML 部分很简单。它由一个 nav 元素组成，该元素包含三个主要组件：

• 一个标志（图片）
• 带有可点击链接的**菜单**列表（主页、关于我们、联系我们、博客）
• 一个**按钮**，充当号召性用语（立即致电）
• 该结构被包装在一个元素内，该元素充当导航栏的容器。

雷雷

徽标是使用标签创建的。菜单是一个无序列表(

)

，其中包含列表项 (

)

，每个列表项都有一个锚标记 ()来创建到不同页面的链接。最后，按钮是一个带有样式的简单标签。

使用 CSS 设计样式

神奇的事情发生在 CSS 部分，我们在其中定义导航栏的布局和外观。让我们讨论一些关键要素。

背景和身体造型
身体有一个渐变背景，从蓝色（#2258c3）过渡到粉色（#fd2df3）。高度设置为 100vh（视口高度），这确保背景填满整个屏幕，并且没有边距以避免页面周围出现不必要的空间。

雷雷

导航栏样式

导航栏有白色背景和圆角（边框半径：30px）。内边距和边距在导航栏内部和外部创建间距。 display: flex 属性使导航栏成为弹性框，允许其子元素水平对齐。 justify-content: space- Between 确保徽标、菜单和按钮均匀分布。

雷雷

将导航栏固定到顶部

导航栏的关键功能之一是滚动时保持在页面顶部。为了实现这一点，我们使用position:fixed属性。这允许导航栏保持固定在顶部（顶部：0），无论滚动如何。此外，z-index: 9999 确保导航栏始终位于页面上其他元素之上。

雷雷

菜单项和交互性

使用 .menu 类上的 display: flex 水平显示菜单项。这些项目通过边距指定间距，并且每个项目的样式都被设置为删除默认列表样式和填充。菜单项中的链接没有文字装饰，并且采用粗体和深色样式。

链接上的悬停效果会更改颜色以匹配蓝色背景颜色（#2258c3），提供链接是交互式的视觉提示。

雷雷

按钮样式

该按钮的样式为蓝色背景（#2258c3）、白色文本和圆角（边框半径：20px）。悬停时，背景变为粉红色(#fd2df3)以匹配背景中的渐变。

雷雷

如何保持导航栏始终位于顶部

要使用 CSS 修复页面顶部的标题，请使用position:fixed 属性和 top:0。这可以确保导航栏在用户滚动时保持在顶部。下面是它在代码中的应用方式：

雷雷

以上是如何使用 HTML 和 CSS 创建导航栏的详细内容。更多信息请关注PHP中文网其他相关文章！