html怎么做一级菜单图标

在网页设计中，一级菜单是网站导航的重要组成部分，它可以帮助用户快速找到所需的信息，HTML是一种用于创建网页的标准标记语言，通过使用HTML标签，我们可以创建出美观且易于使用的一级菜单，本文将详细介绍如何使用HTML制作一级菜单。

1、使用<ul>和<li>标签创建列表

在HTML中，我们使用<ul>（无序列表）和<li>（列表项）标签来创建一级菜单，我们需要创建一个<ul>标签，然后在其中添加多个<li>标签，每个<li>标签代表一个菜单项。

<ul>
  <li>首页</li>
  <li>关于我们</li>
  <li>产品与服务</li>
  <li>联系我们</li>
</ul>

2、为列表项添加链接

为了使一级菜单具有交互性，我们可以为每个列表项添加一个链接，在<a>标签中，我们需要设置href属性为目标页面的URL。

<ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="about.html">关于我们</a></li>
  <li><a href="products.html">产品与服务</a></li>
  <li><a href="contact.html">联系我们</a></li>
</ul>

3、为列表项添加样式

为了使一级菜单更具吸引力，我们可以为其添加一些样式，我们可以使用CSS来设置列表项的背景颜色、字体大小、边框等属性。

<style>
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    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: 111;
  }
</style>

在这个例子中，我们首先设置了ul标签的样式，使其无边框、隐藏溢出的内容，并设置背景颜色，我们设置了li标签的浮动属性，使其水平排列，接下来，我们设置了a标签的样式，包括文本颜色、对齐方式、内边距和下划线，我们为鼠标悬停时的a标签添加了一个背景颜色。

4、为一级菜单添加子菜单

有时，我们需要在一级菜单中添加子菜单，为了实现这一点，我们可以在每个列表项中再添加一个嵌套的<ul>标签。

<ul>
  <li><a href="index.html">首页</a></li>
  <li><a href="about.html">关于我们</a>
    <ul>
      <li><a href="history.html">公司历史</a></li>
      <li><a href="team.html">团队成员</a></li>
    </ul>
  </li>
  <li><a href="products.html">产品与服务</a></li>
  <li><a href="contact.html">联系我们</a></li>
</ul>

在这个例子中，我们在“关于我们”列表项中添加了一个嵌套的<ul>标签，并在其中添加了两个子菜单项，这样，我们就实现了一级菜单中的子菜单功能。

5、响应式设计

为了使一级菜单在不同设备上都能正常显示，我们可以使用响应式设计技术，通过使用媒体查询（media query），我们可以根据设备的屏幕宽度来调整一级菜单的样式。

@media screen and (max-width: 768px) {
  li {
    float: none;
  }
}

在这个例子中，当屏幕宽度小于或等于768像素时，我们将float属性设置为none，使列表项垂直排列，这样，一级菜单就可以在移动设备上正常显示了。