[分享]css做固定菜单栏

CSS作为网页设计中的一项重要技术，常常用来实现网页的各种功能。其中，固定菜单栏也是网页设计中比较常见的一种需求。接下来，我们就来学习一下如何使用CSS实现固定菜单栏吧。/ HTML和CSS代码 / ...

CSS作为网页设计中的一项重要技术，常常用来实现网页的各种功能。其中，固定菜单栏也是网页设计中比较常见的一种需求。接下来，我们就来学习一下如何使用CSS实现固定菜单栏吧。

/* HTML和CSS代码 */
<div class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</div>

/* CSS样式 */
.menu {
  position: fixed; /* 固定位置 */
  top: 0; /* 距离顶部0像素 */
  width: 100%; /* 宽度占满 */
  background-color: #fff; /* 背景颜色白色 */
  border-bottom: 1px solid #ccc; /* 下边框1像素，颜色灰色 */
}

.menu ul {
  margin: 0; /* 去除列表默认的外边距 */
  padding: 0; /* 去除列表默认的内边距 */
}

.menu li {
  display: inline-block; /* 将列表项变成行内块元素 */
}

.menu li a {
  display: block; /* 将链接变成块级元素 */
  padding: 10px 15px; /* 上下10像素，左右15像素 */
  color: #333; /* 文字颜色黑色 */
  text-decoration: none; /* 去除下划线 */
}

.menu li a:hover {
  background-color: #f2f2f2; /* 鼠标经过时背景颜色浅灰色 */
} 

在上面的代码中，.menu类选择器设置了固定的位置（position: fixed;），距离顶部0像素（top: 0;），宽度占满（width: 100%;），背景颜色白色（background-color: #fff;），和下边框1像素，颜色灰色（border-bottom: 1px solid #ccc;）。

而.menu ul选择器和.menu li选择器则分别设置了去除了列表默认的外边距和内边距，以及将列表项变成行内块元素的样式。另外，.menu li a选择器还设置了链接变成块级元素，以及链接的颜色和文本装饰。最后，.menu li a:hover选择器则设置了当鼠标经过时的背景颜色。

这样，就完成了一个简单的固定菜单栏的实现了。大家可以在实际开发中根据需要进行调整和改进。