当前位置：首页 > CSS

制作css导航栏实验

2026-01-08 19:34:18CSS

实验目标

通过CSS实现一个水平导航栏，包含悬停效果和响应式设计。

基本HTML结构

创建一个简单的导航栏HTML结构，使用<ul>和<li>标签组织导航项：

制作css导航栏实验

<nav class="navbar">
  <ul>
    <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>

基础CSS样式

清除默认列表样式并设置水平布局：

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.navbar li {
  flex-grow: 1;
}

.navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

悬停效果

为导航项添加鼠标悬停时的背景色变化：

制作css导航栏实验

.navbar a:hover {
  background-color: #111;
}

响应式设计

通过媒体查询实现移动端适配（屏幕宽度小于600px时改为垂直布局）：

@media (max-width: 600px) {
  .navbar ul {
    flex-direction: column;
  }
}

高级效果扩展

添加过渡动画和当前页面高亮：

.navbar a {
  transition: background-color 0.3s ease;
}

.navbar a.active {
  background-color: #4CAF50;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.navbar li {
  flex-grow: 1;
}

.navbar a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.navbar a:hover {
  background-color: #111;
}

.navbar a.active {
  background-color: #4CAF50;
}

@media (max-width: 600px) {
  .navbar ul {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<nav class="navbar">
  <ul>
    <li><a class="active" 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>