当前位置：首页 > CSS

css制作导航

2026-01-13 12:02:34CSS

CSS 制作导航的方法

基础水平导航栏

使用无序列表（<ul>）和浮动（float）或 Flexbox 布局实现水平导航：

<nav>
  <ul class="horizontal-nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
  </ul>
</nav>

.horizontal-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  background-color: #333;
}

.horizontal-nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.horizontal-nav li a:hover {
  background-color: #111;
}

垂直导航栏

调整 Flexbox 方向为垂直排列：

.vertical-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
}

.vertical-nav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.vertical-nav li a:hover {
  background-color: #555;
  color: white;
}

响应式导航栏

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

@media screen and (max-width: 600px) {
  .horizontal-nav {
    flex-direction: column;
  }
}

固定定位导航

使导航栏始终停留在页面顶部或底部：

.fixed-top {
  position: fixed;
  top: 0;
  width: 100%;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

下拉菜单导航

结合 CSS 伪类和绝对定位实现下拉功能：

<li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">下拉菜单</a>
  <div class="dropdown-content">
    <a href="#">链接1</a>
    <a href="#">链接2</a>
  </div>
</li>

.dropdown {
  position: relative;
  display: inline-block;
}

.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:hover .dropdown-content {
  display: block;
}

css制作导航