经典导航条div+css代码

经典导航条通常使用div元素和CSS代码来实现。以下是一个简单的经典导航条的例子：

HTML代码：

<div class="navigation">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</div>

CSS代码：

.navigation {
  background-color: #333;  /* 导航条背景颜色 */
  height: 50px;  /* 导航条高度 */
}

.navigation ul {
  list-style-type: none;  /* 去除列表项的默认样式 */
  margin: 0;  /* 去除列表的外边距 */
  padding: 0;  /* 去除列表的内边距 */
}

.navigation li {
  display: inline-block;  /* 水平排列列表项 */
}

.navigation li a {
  color: #fff;  /* 导航链接的文字颜色 */
  display: block;  /* 将链接变成块级元素 */
  padding: 10px 20px;  /* 链接的内边距 */
  text-decoration: none;  /* 去除链接的下划线 */
}

.navigation li a:hover {
  background-color: #555;  /* 鼠标悬停时链接的背景颜色 */
}

以上代码中的导航条使用一个具有".navigation"类的div元素来包含一个无序列表（ul），无序列表中的每个列表项（li）都包含了一个链接（a）。通过在CSS代码中设置样式属性，我们可以将导航条的颜色、高度、链接的样式等进行定制。