当前位置：首页 > CSS

div css制作导航

2026-03-31 19:49:18CSS

使用DIV和CSS制作导航

导航栏是网站的重要组成部分，通过DIV和CSS可以创建灵活且响应式的导航栏。以下是几种常见的方法：

水平导航栏

创建一个水平导航栏，可以使用无序列表（ul）和CSS样式。

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

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

垂直导航栏

垂直导航栏适合侧边栏或移动端设计。

<div class="sidebar">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</div>

.sidebar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

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

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

固定导航栏

固定导航栏会始终保持在页面顶部或底部。

<div class="fixed-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</div>

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

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

.fixed-nav li {
  float: left;
}

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

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

响应式导航栏

响应式导航栏可以根据屏幕大小调整布局。

div css制作导航

<div class="responsive-nav">
  <ul>
    <li><a href="#home">首页</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
  </ul>
</div>

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

.responsive-nav li {
  float: left;
}

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

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

通过以上方法，可以轻松创建各种类型的导航栏，满足不同设计需求。