当前位置：首页 > CSS

使用css制作导航

2026-01-28 15:05:47CSS

基础导航栏结构

使用HTML创建导航栏的基本结构，通常使用<nav>和<ul>标签：

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

清除默认样式

重置列表和链接的默认样式，确保跨浏览器一致性：

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav a {
  text-decoration: none;
  color: inherit;
}

水平导航栏

通过display: flex实现水平布局，并添加间距和悬停效果：

nav ul {
  display: flex;
  gap: 20px;
}
nav a:hover {
  color: #007bff;
  text-decoration: underline;
}

垂直导航栏

使用flex-direction: column改为垂直布局，适合侧边栏：

nav ul {
  flex-direction: column;
  gap: 10px;
}

响应式设计

通过媒体查询调整导航栏在小屏幕下的表现（如转为汉堡菜单）：

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    display: none; /* 初始隐藏 */
  }
  /* 添加汉堡菜单触发逻辑 */
}

高级样式增强

添加背景、圆角、阴影等视觉效果：

nav {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
nav li {
  padding: 8px 12px;
  transition: background 0.3s;
}
nav li:hover {
  background: #e9ecef;
}

下拉菜单实现

嵌套<ul>实现二级菜单，通过CSS控制显示/隐藏：

nav li {
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
}
nav li:hover > ul {
  display: block;
}