html+css 实现简易导航栏功能

下面是详细讲解 "html+css 实现简易导航栏功能"的完整攻略。

1. 编写 HTML 代码

首先需编写 HTML 代码来构建导航栏。HTML代码必须包含导航栏所需的所有链接和占位符。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

2. 使用 CSS 格式化导航栏

接下来，我们需要使用 CSS格式化导航栏。这里，我们将使用 flexbox 来设置导航栏的排列方式。

nav {
  background-color: #333;
  height: 50px;
}

nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

nav ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  transition: all 0.5s ease;
}

nav ul li a:hover {
  background-color: #555;
}

上述代码将显示一个黑色背景的导航栏，包含白色的链接文本。 链接文本是居中对齐的，包含一个动态效果。

3. 示例说明

示例1 - 垂直排布的导航栏

有时候，我们需要使用垂直排布的导航栏。我们可以使用下面的代码，使 nav ul 表现为坚纵排列：

nav ul {
  flex-direction: column;
}

示例2 - 导航栏悬浮效果

我们可以添加一个悬浮效果，当鼠标悬浮在链接上时，链接文本背景色变为白色：

nav ul li a:hover {
  background-color: white;
  color: #333;
}

如上所述，这是实现简易导航栏功能的完整攻略。