css制作导航条

导航条基础结构

使用HTML构建导航条的基本结构，通常包含一个<nav>标签和多个<a>标签作为导航链接。示例代码如下：

<nav class="navbar">
  <a href="#home">首页</a>
  <a href="#news">新闻</a>
  <a href="#contact">联系</a>
  <a href="#about">关于</a>
</nav>

水平导航条样式

通过CSS设置导航条为水平布局，并添加基础样式：

.navbar {
  background-color: #333;
  overflow: hidden;
}

.navbar a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

悬停效果

添加悬停效果以提升交互体验：

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

当前页面高亮

为当前所在页面的导航项添加高亮样式：

.navbar a.active {
  background-color: #04AA6D;
  color: white;
}

响应式导航条

使用媒体查询实现响应式设计，在小屏幕上显示为垂直布局：

@media screen and (max-width: 600px) {
  .navbar a {
    float: none;
    display: block;
    text-align: left;
  }
}

固定定位导航条

使导航条固定在页面顶部或底部：

/* 固定在顶部 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
}

/* 固定在底部 */
.navbar {
  position: fixed;
  bottom: 0;
  width: 100%;
}

下拉菜单导航

创建包含下拉菜单的导航条：

<div class="navbar">
  <a href="#home">首页</a>
  <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
      <a href="#">链接1</a>
      <a href="#">链接2</a>
      <a href="#">链接3</a>
    </div>
  </div>
</div>

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

导航条动画效果

为导航条添加过渡动画：

.navbar a {
  transition: all 0.3s ease;
}

.navbar a:hover {
  transform: translateY(-3px);
}