当前位置：首页 > CSS

CSS怎么制作导航

2026-04-02 08:10:37CSS

使用HTML和CSS创建导航栏

导航栏通常使用<nav>和<ul>元素构建，通过CSS设置样式和布局。

HTML结构示例：

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

基础导航栏样式

清除列表默认样式并创建水平导航：

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.navbar li {
  float: left;
}

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

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

响应式导航栏设计

使用Flexbox实现更灵活的布局：

CSS怎么制作导航

.navbar ul {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

媒体查询适配移动设备：

@media screen and (max-width: 600px) {
  .navbar li {
    float: none;
    width: 100%;
  }
}

下拉菜单实现

HTML结构：

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

CSS样式：

CSS怎么制作导航

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

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 160px;
  z-index: 1;
}

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

固定定位导航栏

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

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

注意要为主内容添加顶部边距：

body {
  margin-top: 50px;
}

现代CSS特性应用

使用CSS变量便于主题管理：

:root {
  --nav-bg: #333;
  --nav-text: white;
  --nav-hover: #111;
}

.navbar ul {
  background-color: var(--nav-bg);
}

.navbar li a {
  color: var(--nav-text);
}

.navbar li a:hover {
  background-color: var(--nav-hover);
}

标签: CSS