[分享]css两行的导航条

在网站设计中，导航条是非常重要的元素之一。它可以让用户更方便地浏览网站的不同部分和页面。而使用 CSS 可以轻松地创建漂亮且易于使用的导航条。下面是一个基于 CSS 的两行导航条的代码示例：nav {...

在网站设计中，导航条是非常重要的元素之一。它可以让用户更方便地浏览网站的不同部分和页面。而使用 CSS 可以轻松地创建漂亮且易于使用的导航条。下面是一个基于 CSS 的两行导航条的代码示例：

nav {
  background-color: #333;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

nav ul li:hover a {
  color: #f00;
}

nav .logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

nav .btn {
  background-color: #f00;
  color: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 16px;
}

nav .btn:hover {
  background-color: #fff;
  color: #f00;
}

上面的代码使用了 flexbox 布局来创建导航条。nav 元素表示整个导航条，其中包含了一个 ul 元素，它包含了多个 li 元素，每个 li 元素代表一个导航链接。a 元素则代表每个链接，它们使用了不同的 CSS 样式来进行定制。.logo 和 .btn 则分别代表了导航条中的品牌图片和按钮。

总的来说，使用 CSS 可以很方便地创建漂亮且易于使用的导航条。上面的代码示例只是其中之一，您可以根据自己的需求进行定制并创造出属于自己网站的导航条。