网页导航制作css

网页导航制作 CSS

基础导航栏结构

导航栏通常使用无序列表 <ul> 和列表项 <li> 构建，搭配 <a> 标签实现链接功能。HTML 结构如下：

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

清除默认样式

浏览器对 <ul> 和 <li> 有默认样式（如边距和列表符号），需优先清除：

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

水平导航栏

通过 display: flex 实现水平布局，并调整间距：

nav ul {
  display: flex;
  gap: 20px; /* 项间距 */
  background-color: #333; /* 背景色 */
  padding: 10px 20px;
}
nav a {
  color: white;
  text-decoration: none;
  font-family: Arial, sans-serif;
}

悬停效果

添加交互效果提升用户体验：

nav a:hover {
  color: #ff9900;
  text-decoration: underline;
}

响应式设计

使用媒体查询适配移动设备，转换为汉堡菜单：

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

下拉菜单

通过 CSS 实现二级菜单（需配合 JavaScript 控制显示）：

nav li {
  position: relative;
}
nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #444;
}
nav li:hover > ul {
  display: flex;
  flex-direction: column;
}

粘性导航

让导航栏滚动时固定在页面顶部：

nav {
  position: sticky;
  top: 0;
  z-index: 100;
}

动画过渡

为状态变化添加平滑过渡：

nav a {
  transition: color 0.3s, background-color 0.3s;
}

高亮当前页

通过 .active 类标记当前页面：

nav a.active {
  color: #ff9900;
  font-weight: bold;
}