[分享]css列表式的菜单怎么做

在网页设计中，列表式的菜单是非常常见的，它可以为用户提供一个清晰的导航结构。在CSS中，我们可以使用ul和li标签来创建这样的菜单。 主页 关于我们 联系 以上代码可以创建一个基本的菜单，其中ul表...

在网页设计中，列表式的菜单是非常常见的，它可以为用户提供一个清晰的导航结构。在CSS中，我们可以使用ul和li标签来创建这样的菜单。

<ul>
  <li><a href="#">主页</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系</a></li>
</ul> 

以上代码可以创建一个基本的菜单，其中ul表示无序列表，li表示列表项。a标签用于添加一个链接到菜单项，可以在href属性中指定链接地址。

我们可以通过CSS来对菜单进行样式调整，比如修改字体大小、颜色、背景等。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #f6f6f6;
}

li {
  display: inline-block;
  margin-right: 15px;
}

a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

a:hover {
  background: #333;
  color: #fff;
} 

以上CSS代码可以将菜单的样式进行简单的调整。list-style: none用于去除原本的列表符号，margin和padding用于去除默认的留白和间距，background为菜单添加了一个浅灰色的背景。

li的display属性被设置为inline-block，这样可以将每个菜单项横向排列而不是竖直排列。同时，margin-right用于在每个菜单项之间添加一个间距。

a标签被display设置为block，这样可以使整个菜单项都是可点击的。text-decoration: none用来去掉链接的下划线。color属性用于设置菜单项的字体颜色。

a:hover用于设置当鼠标悬停在菜单项上时的样式。这里将背景设为黑色，将字体颜色设为白色。

通过以上代码，我们可以轻松地创建出一个漂亮的、可定制的列表式菜单。