div css制作导航

导航栏的基本结构

使用HTML的<nav>标签包裹导航链接，内部通常采用无序列表<ul>和列表项<li>结构。示例代码如下：

<nav>
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

清除默认样式

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

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

水平导航布局

使用Flexbox实现水平排列：

nav ul {
  display: flex;
  gap: 1rem; /* 控制菜单项间距 */
}
nav li {
  padding: 0.5rem 1rem;
}

悬停和激活状态

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

nav a:hover {
  color: #3498db;
  border-bottom: 2px solid #3498db;
}
nav a.active {
  font-weight: bold;
  color: #e74c3c;
}

响应式设计

通过媒体查询适配移动设备：

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

下拉菜单实现

结合伪类和绝对定位创建二级菜单：

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

固定定位导航

使导航栏始终停留在视口顶部：

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 1000;
}
body {
  padding-top: 60px; /* 防止内容被导航栏遮挡 */
}