css制作导航栏

基础导航栏结构

使用HTML创建导航栏的基本结构，通常使用<nav>标签包裹无序列表<ul>，列表项<li>包含链接<a>：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

清除默认样式并水平排列

通过CSS重置列表的默认样式，并将列表项转为水平排列：

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

美化链接样式

为导航链接添加内边距、颜色和悬停效果：

nav a {
  display: block;
  padding: 12px 20px;
  text-decoration: none;
  color: #333;
  font-family: Arial, sans-serif;
}

nav a:hover {
  background-color: #f0f0f0;
  color: #007bff;
}

添加活动状态指示

为当前页面链接添加特殊样式：

nav a.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

响应式设计处理

使用媒体查询实现移动端适配：

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

  nav a {
    padding: 10px;
    text-align: center;
  }
}

高级效果扩展

添加过渡动画和下划线效果：

nav a {
  position: relative;
  transition: all 0.3s ease;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #007bff;
  transition: all 0.3s ease;
}

nav a:hover::after {
  width: 80%;
  left: 10%;
}