css层叠样式表 做菜单

CSS层叠样式表是一种称为样式表的语言，它可用于将样式应用于文档的各个元素。 在一份文档中，您可以将CSS样式应用于不同的HTML元素。 每个元素可以有自己的样式 - 与其他元素共享或不共享。 这就是层叠样式表的作用。

一个常见的CSS应用程序是在HTML网页上创建菜单。 菜单可以是水平或垂直的，它们可以包括文本，图像和链接。 下面是一个简单的例子，说明如何使用CSS创建水平菜单：

<ul class="menu">
  <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>

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

.menu li {
  display: inline-block;
}

.menu li a {
  display: block;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #4CAF50;
}

在这个例子中，我们使用了一个无序列表（<ul>）来包括菜单并为其添加了一个class，“menu”。“menu”class中的CSS样式指定了列表的样式，如去除点标记并设置背景颜色。 接下来，我们为列表项（<li>）添加了一个CSS样式，使它们以inline-block的形式排列。最后，我们使用一个CSS样式为菜单项（<a>）设置链接的样式。

上面的CSS样式表是一般的应用，你可以根据自己的需要进行编辑，修改背景颜色，字体大小，间距等，来获得自己的设计。