使用 7 行 CSS 创建一个简单的导航栏

导航栏是任何网站的重要组成部分。我经常看到初学者编写大量的 CSS 规则来定位导航栏元素，并编写更多 CSS 来实现响应式布局。因此，在本文中，我将展示如何仅用 7 条 CSS 规则创建一个简单的导航栏，并在此基础上进行扩展。

HTML 设置

以下是创建导航栏所需的全部 HTML。请注意，为了简单起见，我没有使用任何类，但如果您打算将此基础代码用于项目，我建议您这样做。

<nav>
  <h2>Title</h2>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>

此时，没有任何 CSS 样式，你的导航栏应该看起来像这样。 嗯，不太好看。我们来改一下吧！

CSS 设置

在为导航栏编写任何 CSS 之前，让我们重置文档的填充和边距，并使用更好的字体。

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: Arial, Tahoma, Serif;
  color: #263238;
}

导航栏样式

让我们进入有趣的部分！我们将使用 Flexbox 来对齐元素。如果您不知道 Flexbox 是什么，它是一种一维布局模型，提供项目之间的空间分配和强大的对齐功能。如果您想了解 Flexbox，这是一个很棒的资源。
以下 7 条神奇规则将为我们打下良好的基础。

nav {
  display: flex; /* 1 */
  justify-content: space-between; /* 2 */
  padding: 1rem 2rem; /* 3 */
  background: #cfd8dc; /* 4 */
}

nav ul {
  display: flex; /* 5 */
  list-style: none; /* 6 */
}

nav li {
  padding-left: 1rem; /* 7! */
}

导航栏现在应该是这个样子的， 看起来完成了吗？没有。它是响应式的吗？没有。但这是一个很好的基础吗？当然可以。现在你可以按照你网站的设计语言，让它看起来像你想要的样子。

首先，您可以通过删除文本装饰并选择更好的颜色来使导航栏链接看起来更好，如下所示，

nav a {
  text-decoration: none;
  color: #0d47a1
}

好多了，对吧？

使其响应

别担心，我不会让你因为导航栏不响应而苦恼。让我们把它变成响应式的！
通常，对于移动设备，你会想要一个汉堡菜单来显示导航栏链接。但为了简单起见，让我们在移动设备上堆叠元素。我们可以使用一个简单的媒体查询来实现，如下所示：

/* 
  Extra small devices (phones, 600px and down) 
*/
@media only screen and (max-width: 600px) {
  nav {
    flex-direction: column;
  }
  nav ul {
    flex-direction: column;
    padding-top: 0.5rem;
  }
  nav li {
    padding: 0.5rem 0;
  }
} 

现在它在小型设备上看起来应该是这样的，

最后的话

如你所见，创建导航栏并使其响应式并不难。现在你可以尽情发挥，让它看起来非常漂亮。如果你用这个基础做了什么，请告诉我！

如果您想和我聊聊任何科技话题，或者只是打个招呼，您可以通过 LinkedIn或Twitter 联系我。我的私信已开放！

如果您想看看它的实际运行情况，我会在这里留下完整的 codepen 项目，希望您喜欢它！