Tailwind CSS 是一个强大的 CSS 框架，可以快速构建响应式界面。在本文中，我们将介绍如何使用 Tailwind CSS 实现两种不同样式的固定头部导航栏，以及如何使其响应式。
准备工作
在开始之前，请确保您已在项目中使用 Tailwind CSS。您可以使用 CDN 引入或通过 npm 安装。具体步骤请参考官方文档。
方案一：固定颜色导航栏
我们首先来看一下如何创建一个固定颜色的导航栏，其背景颜色始终为灰色（#333333），文字和链接颜色为白色（#ffffff）。
HTML 结构
首先，我们需要创建一个包含导航栏的 HTML 结构。以下是一个简单的示例。
-- -------------------- ---- -------
------- ------------------ ---------- -----------
---- ---------------- ------- ---- --------- --- -------- ----------- --------------
-- ----------- ---------- ----------- ------------ ---------------- -------------- ------------
----- ----------- --------------------
----
---- ----------------- ---------- ---- --------- ------------ --------- ----------------
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
------
------- ------------------ ------------ -------- -------- ---- ---- ------------------ ----------------- ------- --------- ---- ------------------------
------
---------CSS 样式
接下来，我们需要使用 Tailwind CSS 来添加样式。在上面的 HTML 结构中，我们使用了许多带有 - 前缀的类，这些类对应着不同的 Tailwind 样式。例如，flex flex-wrap p-5 flex-col md:flex-row items-center 样式将元素设置为左对齐，并在移动设备上堆叠。
-- -------------------- ---- ------- ------------ - ----------------- -------- - ----------- - ------ -------- - --------------------------- - ------ -------- -
效果演示
注意事项
在使用响应式类时，请始终将较具体的类放在较不具体的类之后。例如，md:flex-row flex-col 是一个有效的类，而 flex-col md:flex-row 将被忽略。
方案二：两种不同颜色的固定头部导航栏
接下来，我们将学习如何创建一个使用两种不同颜色的固定头部导航栏。在这个示例中，顶部导航栏背景颜色为白色（#ffffff），而下方导航栏背景颜色为灰色（#333333）。
HTML 结构
以下是一个简单的 HTML 结构，其中包含两种不同颜色的固定导航栏。
-- -------------------- ---- -------
------- ------------ ------ ---- -------
---- -----------------
---- ---------------- ------- ---- --------- --- -------- ----------- --------------
-- ----------- ---------- ----------- ------------ ---------------- -------------- ---------------
----- ----------- --------------------
----
---- ----------------- ---------- ---- --------- ------------ --------- ----------------
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
------
------- ------------------ ------------ ----------- -------- ---- ---- ------------------ ----------------- ------- --------- ---- ------------------------
------
------
---- --------------------
---- ---------------- ------- ---- --------- --- -------- ----------- --------------
---- ----------------- ---------- ---- --------- ------------ --------- ----------------
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
-- ----------- ------------------------- -----
------
------
------
---------CSS 样式
为了使两种不同颜色的导航栏固定，我们使用 fixed 类将其设置为固定的。我们还使用了 z-10 类来确保导航栏位于页面顶部。
-- -------------------- ---- ------- ------ - --------- ------ - ------ - ---- -- - ----- - -------- --- -
我们还需要为两个导航栏添加背景颜色。以下是我们使用的样式。
.bg-white {
background-color: #ffffff;
}
.bg-gray-900 {
background-color: #333333;
}效果演示
注意事项
在创建具有不同背景颜色的两个导航栏时，需要使用两个 DIV 元素。否则，您将无法更改两个导航栏之间的颜色和样式。
响应式导航栏
现在，我们已经学习了如何创建两种不同颜色的导航栏。接下来，我们将使其响应式，并在小屏幕设备上自动隐藏顶部导航栏。
HTML 结构
以下是我们使用的 HTML 结构，其中包含具有两个导航栏的响应式布局。
-- -------------------- ---- -------
------- ------------ ------ ---- -------
---- ----- ---
---- --------------- -------- --------
---- --- ---
------
---- ----- ---
---- --------------------
---- --- ---
------
---- ------ ---
---- ------------- -----------
---- ------------ ---
------- ----------- ------------ ---- ---- ------ ------- ------------- --------------- ------------------- -----------------------
---- ---------- - -- --- ------------------- ----------- --- -----
----- ------------------- ----- --- - - ---------- - - --- ----- - - --------- --- - - ---------- - - --- ----- - - --------- --- - - --- ------ - - --------- ------------------- --
------
---------
---- ------------ ---
---- ------------- -------- ----- ------ ------ ------
---- --------------- ---- --------- --- -------- ----------- ---------- -----------------
-- -------------------- ---- ------------------------- -----
-- -------------------- ---- ------------------------- -----
-- -------------------- ---- ------------------------- -----
------
------
------
---------CSS 样式
为了在移动设备上自动隐藏顶部导航栏，我们使用 hidden md:block 类。这样顶部导航栏将在大屏幕上显示，而在小屏幕上将自动隐藏。
.md\:block {
display: block !important;
}
.hidden {
display: none !important;
}为了在小屏幕设备上显示菜单按钮，我们使用了 hidden md:hidden 类。这样菜单按钮和菜单列表将在小屏幕设备上显示，而在大屏幕设备上将自动隐藏。
.md\:hidden {
display: none !important;
}菜单按钮和菜单列表的样式可以使用以下样式来设置。
-- -------------------- ---- ------- ---------------- - ------------- -------- - ---------------- - ------------- -------- - -------------- - ------ -------- -
效果演示
注意事项
请记住，在使用响应式类时，始终将更具体的类放在较不具体的类之后。否则，样式将无法正确应用到元素上。
总结
在本文中，我们学习了如何使用 Tailwind CSS 快速构建响应式导航栏。我们创建了两种不同颜色的固定导航栏，并使其响应式。此外，我们还学习了如何使用 Tailwind 的类来优化样式。
希望这篇文章对你有所帮助，让你更好地理解 Tailwind CSS，并且可以让你更快地构建响应式界面。如果你有任何问题或建议，请随时在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518c3f095b1f8cacd10de88