📌  相关文章
📜  如何使用 HTML 和 CSS 创建垂直导航栏？(1)

📅  最后修改于: 2023-12-03 15:08:19.161000             🧑  作者: Mango

如何使用 HTML 和 CSS 创建垂直导航栏？

制作垂直导航栏是网站设计中的一个常见需求，在 HTML 和 CSS 中，我们可以使用无序列表元素 <ul> 和列表项元素 <li> 来创建一个基本的垂直导航栏。

HTML 代码实现

我们先来看一下 HTML 代码的实现，需要创建一个 <ul> 元素包含多个 <li> 元素，每个 <li> 元素表示一个导航项。在每个 <li> 元素中，我们添加一个 <a> 元素来表示导航项的链接地址。

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于</a></li>
  <li><a href="#">联系</a></li>
</ul>
CSS 代码实现

在 HTML 代码中，我们只是定义了一个基本的无序列表，我们需要使用 CSS 来对其进行样式设置。

首先，我们需要将无序列表设置为垂直布局：

.nav {
  display: flex;
  flex-direction: column;
}

然后，我们可以使用下面的代码对导航项进行样式设置：

.nav li {
  display: block;
  margin: 10px 0;
}

.nav li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
}

.nav li a:hover {
  background-color: #e6e6e6;
}

这些代码将会将导航列表项设置为垂直布局，并将它们之间的间距设置为 10 像素。每个导航项的链接会被设置为块级元素，并且具有 8 像素的内边距和 4 像素的圆角。

当用户悬停在链接上时，背景色将会变为浅灰色，提高用户体验。

完整代码

下面是完整的 HTML 代码和 CSS 代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>垂直导航栏</title>
  <style>
    .nav {
      display: flex;
      flex-direction: column;
    }

    .nav li {
      display: block;
      margin: 10px 0;
    }

    .nav li a {
      display: block;
      padding: 8px 16px;
      text-decoration: none;
      color: #333;
      border-radius: 4px;
    }

    .nav li a:hover {
      background-color: #e6e6e6;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">联系</a></li>
    </ul>
  </nav>
</body>
</html>
总结

通过 HTML 和 CSS，我们可以很容易地创建一个垂直导航栏，这样可以简化网站用户的导航体验，帮助用户在网站中快速找到所需信息。在这个示例中，我们使用了无序列表元素 <ul> 和列表项元素 <li> 来创建基本的导航栏，使用 CSS 布局和样式来设置导航栏的样式。