[分享]css中怎么制作菜单栏

CSS是一种用于网页设计的语言，它可以帮助我们制作出美观的菜单栏。下面，我们就来一起看看如何使用CSS制作菜单栏。首先，我们需要先在HTML中定义我们的菜单栏，可以使用和标签： 菜单1 菜单2 菜单3...

CSS是一种用于网页设计的语言，它可以帮助我们制作出美观的菜单栏。下面，我们就来一起看看如何使用CSS制作菜单栏。

首先，我们需要先在HTML中定义我们的菜单栏，可以使用

和
• 标签：

  <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
  </ul>

  在CSS中，我们可以使用下面的代码来设置菜单栏的样式：

  ul {
    list-style-type: none;  /* 去掉列表符号 */
    margin: 0;  /* 去掉默认的外边距 */
    padding: 0;  /* 去掉默认的内边距 */
    background-color: #333;  /* 设置背景颜色 */
  }
  
  li {
    float: left;  /* 让菜单项浮动在左侧 */
  }
  
  li a {
    display: block;  /* 将链接变成块级元素，便于设置样式 */
    color: white;  /* 设置链接文字为白色 */
    text-align: center;  /* 让文字居中 */
    padding: 14px 16px;  /* 设置内边距 */
    text-decoration: none;  /* 去掉下划线 */
  }
  
  li a:hover {
    background-color: #4CAF50;  /* 设置鼠标悬停时的背景颜色 */
  }

  通过上面的代码，我们就成功地制作出了一个简单的菜单栏。