使

使用 HTML 和 CSS Flexbox 编写响应式导航栏:第 1 部分

2025-05-25

使用 HTML 和 CSS Flexbox 编写响应式导航栏:第 1 部分

这篇文章最初发表在debugacademy.com上。

导航栏是网站的主要组成部分之一。导航栏是帮助用户浏览网站的重要元素(因此得名)。话虽如此,对于初学者来说,导航栏可能相当令人望而生畏。

不久前,我们在“调试学院”的课程中创建了一个导航栏。说实话,这对我来说并不太难。然后我们必须让它变成响应式的。而且……我真的讨厌它。我理解响应式设计的重要性,但实际上让网站响应式设计真的非常痛苦。

但是,正如我之前所说,所有网站都必须具备响应式功能。您的网站将受到台式电脑和手机用户的访问。而且移动用户的数量正在稳步增长。因此,作为一名 Web 开发人员,您的工作就是确保您的网站无论用户使用哪种设备都能呈现良好的显示效果。

那么,让我们从网页顶部开始,创建一个响应式导航栏。目前,我们只需编写导航栏的代码。在我的下一篇文章中,我将逐步指导您如何将导航栏变为响应式。

在我们开始之前

在开始编码之前,你需要了解一些事情。你需要对 HTML 有相当的理解。如果你是初学者,也不用担心。我最近写了一篇关于 HTML 的综合指南。你可以在和我一起创建导航栏之前先看看这篇指南。


以下是您还需要的一些物品:

•文本编辑器或Codepen
•学习的愿望
•一些 CSS 经验(不是绝对必要的)

步骤 0:<head>


以上大部分内容你应该很熟悉,尤其是如果你已经读过我的 HTML 101 文章的话。每个 HTML 文档都是这样开始的。这个<title>标签对你来说可能比较陌生。由于它位于我们的 中<head>,用户无法<title>在屏幕上看到它。但他们的浏览器会在页面标签页上显示它。

现在是时候添加导航栏的 HTML 了。

步骤 1:导航栏 HTML

本节的重点是<nav>。这是存储导航链接的 HTML 元素。然后,我们<nav>使用无序列表(即 )在 中创建一个列表<ul>。使用<a href>标签,我们将链接放置在 中<li>

如下所示,我只是用“Tab”作为菜单项的占位符。不过,你可以在这里放任何你喜欢的东西。想放什么就放什么。我还给页面标题(“导航栏教程”)设置了一个等于“title”的 id。这是为了稍后在 CSS 中使用。

目前,距离我们的最终目标还很远。这时,CSS 就派上用场了。

第 2 步:<header>CSS

首先,让我们从设置导航栏的背景颜色开始。我们使用background-color属性来实现这一点。您可以使用十六进制颜色代码来选择任何您喜欢的颜色来定义此属性。如果您不喜欢十六进制颜色,可以直接输入基本颜色的名称,例如红色或蓝色。

现在我们要定义导航栏的尺寸。我们希望它水平延伸到整个浏览器。为了实现这一点,我们将宽度设置为 100%。高度也设置为 60px。

正如您所见,我们仍有一些进展,所以让我们继续努力。

步骤3:<ul>CSS

我们不希望菜单项像这样堆叠在一起。有很多方法可以解决这个问题。但我发现最简单的方法是将显示改为弹性。如果不定义此属性,display则默认为块。这就是为什么列表项都像块一样堆叠在一起的原因。display: flex改为使用 可以使它们按照我们想要的方式水平对齐。使用关键字 flex 实现了一种称为 Flexbox 的特殊 CSS 样式。我现在不会详细介绍它。但如果您想了解更多关于 Flexbox 的信息,可以查看CSS-Tricks 的这篇文章

我们还想去掉那些项目符号。我们通过将list-style-type属性设置为 none 来实现这一点。我们可以增加菜单项的字体大小,以便用户更容易阅读。这font-size使我们能够做到这一点。我将字体大小设置font-size为 20px。如果您愿意,可以使用其他值。只需记住,该值必须以像素(即 px)为单位。

我希望所有元素都<li>移到导航栏的右侧。我可以通过使用名为 的 Flexbox 属性来实现justify-content。我们将赋予它 的值flex-end。这会将所有<li>元素移动到导航栏的右侧(或末尾)。

步骤4:<li>CSS

我们所有的<li>元素都挤在一起。它们需要一些空间。为此,我们使用margin属性。将其设置为 20px 会在每个元素的左侧、右侧、顶部和底部留出 20 像素的空间<li>。同样,如果您希望它们之间的距离更近或更远,您可以将像素数更改为您想要的任何数字。我还决定将字体更改为 Arial。我们可以使用该font-family属性来实现这一点。

我们离最终目标越来越近了。再加一点 CSS,我们就能到达!

步骤5:#titleCSS

我喜欢将页面标题设置在导航栏左侧。我们可以通过更改标题的右边距来实现这一点。这时,我们在 HTML 中创建的标题 ID 就派上用场了。有了这个 ID,我们就可以只将 CSS 应用于页面标题。使用 # 标签,我们可以在 CSS 中调用标题 ID。现在,我们添加一个margin-right设置为“auto”的属性,将标题移动到导航栏的左侧。

步骤6:<a href>CSS

如你所见,我们的链接全是蓝色的。我不知道你是怎么想的,但我不太喜欢这个样子。所以我将使用下面的代码来定位 li 中的锚标签。我将颜色设置为黑色,并使用text-decoration属性,移除下划线,使其为 none。

我们希望用户知道列表项是链接。为此,我们可以添加一个属性,用于在用户将鼠标悬停在列表项上时显示链接。这可以通过:hover选择器来实现。我们将text-decoration再次使用该属性,这次将其设置为下划线。这段代码会在用户将鼠标悬停在列表项上时为其添加下划线。

您可以自己尝试一下。

步骤 7:使用 CSS 删除默认边距

我们快要完成导航栏了!有一件事让我很困扰,那就是导航栏周围的空白。作为一个初学者,我一直不明白为什么我编写的内容周围总是有一些空白。原来,浏览器<body>默认会给我们的导航栏添加一些外边距。许多其他 HTML 元素也都有默认外边距。

这就是为什么我们的导航栏周围有这么多空间。值得庆幸的是,移除这些空间非常容易。我们必须将 body 的 设置为 0 像素。我们的 ul 也有一个默认边距。同样,我们通过将ul 的 设置为 0px 来margin解决这个问题。margin


结论

这是我们的最终产品。

看起来确实很棒。但是,我们还有一些工作要做。我们的导航栏目前还不是响应式的。在我的下一篇文章中,我们将逐步介绍如何让导航栏响应式。

与往常一样,请随时在下方留下任何其他评论或反馈。我对此非常感激。

文章来源:https://dev.to/ceeoreo/code-a-responsive-navbar-with-html-and-css-flexbox-pt-1-21p1
PREV
再也不会收到意外的 AWS 账单!
NEXT
通过构建这些项目,从初学者变成受雇者!