在现代网站的设计中，顶部导航条是必不可少的一部分。而且，现代网站需要考虑多种设备的屏幕尺寸，所以实现一个响应式的顶部导航条也是非常重要的。
在本文中，我们将会介绍如何使用 Tailwind CSS，一个快速而强大的 CSS 框架，来实现一个响应式的顶部导航条。
步骤
步骤 1：创建一个 HTML 页面
首先，我们需要创建一个 HTML 页面。我们将使用基本的 HTML 结构 - <header> 元素作为我们的导航条的容器。并且在 <header> 元素中创建 ul 和 li 元素来构建导航菜单。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- -------------------
------------ -------- --- -- ------ - ---------- --- ---------- -----------
----- ---------------- ----------------------------------------------------------------------------------
-------
------
------- --------------------
---- ---------------- ------- ---- ---- ---- ------------ -----------------
-- -------- -------------- ------------- ---------- --------------- -----------
--------
----
---- ----------- -----------
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----- --
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
-------
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
------
------
---------
-------
-------步骤 2：使用 Tailwind CSS 引入样式
我们需要将 Tailwind CSS 样式表导入到我们的 HTML 页面中。我们可以使用 CDN 来引入 Tailwind CSS 样式表。在页面的<head>部分中添加以下代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ------------ -------- --- -- ------ - ---------- --- ---------- ----------- ----- ---------------- ---------------------------------------------------------------------------------- ------- ------
步骤 3：添加样式
首先，我们将为我们的 <nav> 元素设置样式。使用“bg-gray-900”将背景颜色设置为灰色。使用容器类“container”以及内衬类“mx-auto”、“px-6”和“py-3”来使导航条与页面中的其他内容保持一致并加大导航条的上下内边距。使用“flex”类和“items-center”、“justify-between”属性来将导航条内部的元素水平居中并将它们隔开。
接下来，我们可以设置我们的网站的标题。使用“text-xl”将字体设为较大的字体。我们还可以使用“text-white”和“font-semibold”将字体颜色设为白色并加粗。使用“tracking-widest”将字间距增加。
最后，我们将设置导航菜单项的样式。使用“flex”，“space-x-4”属性使菜单项水平排列并保持相等的空隙。使用“text-gray-300”，“hover:bg-gray-700”属性将未选中的菜单项颜色设为灰色，并在悬浮时将背景颜色设置为深灰色。我们还可以使用“px-3”和“py-2”属性将菜单项的内边距增加到较合适的大小。
现在，让我们看一下完整的 CSS 样式代码：
-- -------------------- ---- -------
------- --------------------
---- ---------------- ------- ---- ---- ---- ------------ -----------------
-- -------- -------------- ------------- ---------- --------------- -----------
--------
----
---- ----------- -----------
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----- --
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
-------
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
------
------
---------步骤 4：响应式设计
我们需要确保我们的导航条在不同的屏幕尺寸下能够良好地工作。为此，我们将使用 Tailwind CSS 的“lg:hidden”和“lg:flex”属性，以便在大于指定宽度（默认为1024px）时显示和隐藏导航菜单。
为了使菜单条在大屏幕上永久显示，我们将使用 Tailwind CSS 的“hidden lg:flex”属性来防止菜单条在大屏幕上被隐藏。
最后，我们需要使用“text-gray-300”和“h-12”类使菜单项在手机屏幕上合适的大小，并使用“text-sm px-4”来增加文本的间距。
现在，让我们看下如何增加响应式设计到我们的 CSS 样式中：
-- -------------------- ---- -------
------- --------------------
---- ---------------- ------- ---- ---- ---- ------------ -----------------
-- -------- -------------- ------------- ---------- --------------- -----------
--------
----
---- ----------- --------- -----------
------- ---------- -------- --------------- ---------- ------------- ----------------- ---------------- ------------------ ----------------- ------------------
---- ------------------- ---------- - -- --- -----------------------------------
----- ------------------- ----- --- - - ---------- - - --- ----- - - ---------- --- - - --- ----- - - ---- ----- - - ---------- - - ---------- - - --- ------ - - --- ----- - - --- ---- ---- - - --- ------ - - --------- ---------------------------
------
---------
------
---- ------------- ------- --------------- -----------
---- ----------- ------------ -----------------
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----- --
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
-------
----
-- -------- -------------------- ----------------- ---- ---- ---------- ------- -------------
----
----
------
------
------
---------效果展示
使用 Tailwind CSS 的效果如下所示：
结论
使用 Tailwind CSS 能够有效地减少您在编写响应式 web 应用程序时的时间和工作量。在本文中，我们介绍了使用 Tailwind CSS 来实现响应式顶部导航条的步骤。这将使您的网页在不同的设备和屏幕尺寸下都能够工作正常。精心编写的 CSS 代码既有助于使网站更直观，又能增加用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6734ae960bc820c5824a84c4