css ul li 设置导航栏

CSS中的ul和li元素可以用于创建导航栏。在这篇文章中，我们将介绍如何使用CSS来设置导航栏。

/* 设置ul元素 */
ul {
  list-style-type: none; /* 隐藏默认的圆点列表 */
  margin: 0; /* 去除默认外边距 */
  padding: 0; /* 去除默认内边距 */
  overflow: hidden; /* 清除浮动 */
  background-color: #333; /* 设置背景颜色 */
}

/* 设置li元素 */
li {
  float: left; /* 让li元素成为一个横向布局 */
}

/* 设置链接 */
li a {
  display: block; /* 将链接转换为块级元素 */
  color: white; /* 设置文字颜色 */
  text-align: center; /* 居中显示 */
  padding: 16px; /* 设置内边距 */
  text-decoration: none; /* 去除下划线 */
}

/* 当鼠标悬停在链接上时 */
li a:hover {
  background-color: #111; /* 添加背景颜色 */
}

上述CSS代码将创建一个隐藏默认样式、背景颜色为#333的ul元素，以及一组浮动的li元素。链接通过块级元素的display属性设置，颜色、文本对齐和内边距通过CSS属性进行设置。