当前位置：首页 > CSS

在线制作导航css

2026-04-02 15:28:46CSS

使用纯CSS创建导航栏

导航栏通常需要响应式设计，适应不同屏幕尺寸。以下是一个基础的横向导航栏CSS代码示例：

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

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

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

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

响应式导航栏设计

对于移动设备，可以添加媒体查询来调整导航栏样式：

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

下拉菜单实现

如需创建带下拉菜单的导航栏，可以添加以下CSS：

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

.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;
}

粘性导航栏

使导航栏在页面滚动时保持可见：

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

.sticky + .content {
  padding-top: 60px;
}

现代Flexbox布局

使用Flexbox可以更简单地创建灵活的导航布局：

在线制作导航css

.nav-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 10px 20px;
}

.nav-flex a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
}

这些CSS代码片段可以直接复制使用，或根据具体需求进行调整。每种方法都针对不同的导航需求，从简单的基础导航到复杂的响应式设计。