利用HTML无序列表创建菜单页面-优快云博客

本文链接：https://blog.youkuaiyun.com/tangshengyong1/article/details/119350959

本文介绍了如何使用HTML的无序列表标签创建网页菜单页面。通过标准语法，可以轻松构建出层次清晰、易于阅读的菜单结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页上的菜单页面通常使用无序列表来完成，无序列表标准语法：

........
........
........
........

ul是块状元素，每个

成一行，li标签里面可以插入其他标签下面是用无序列表做的菜单页面

<div id="all">
        <div class="biao"><h2>家用电器</h2></div>
        <h3>大家电</h3>
        <ul>
            <li><a href="">平板电脑</a>&nbsp;<a href="">洗衣机</a>&nbsp;<a href="">冰箱</a></li>
            <li><a href="">空调</a>&nbsp;<a href="">烟机/灶具</a>&nbsp;<a href="">热水器</a></li>
            <li><a href="">冷柜/酒柜</a>&nbsp;<a href="">消毒柜</a>&nbsp;<a href="">家庭影院</a></li>
        </ul>
        <h3>生活电器</h3>
        <ul>
            <li><a href="">电风扇</a>&nbsp;<a href="">净化器</a>&nbsp;<a href="">吸尘器</a></li>
            <li><a href="">净水设备</a>&nbsp;<a href="">挂烫机</a>&nbsp;<a href="">电话机</a></li>
        </ul>
            <h3>厨房电器</h3>
        <ul>
            <li><a href="">榨汁机</a>&nbsp;<a href="">电压力锅</a>&nbsp;<a href="">电饭煲</a></li>
            <li><a href="">豆浆机</a>&nbsp;<a href="">微波炉</a>&nbsp;<a href="">电磁炉</a></li>
        </ul>
        <ul>
            <h3>五金家装</h3>
            <li><a href="">淋浴/水槽</a>&nbsp;<a href="">电动工具</a>&nbsp;<a href="">手动工具</a></li>
            <li><a href="">仪器仪表</a>&nbsp;<a href="">浴霸/排气</a>&nbsp;<a href="">灯具</a></li>
        </ul>
    </div>
    使用的css 如下
*{
    padding: 0px;
    margin: 0px;
}
#all{
    width: 250px;
    height: 450px;
    border: 1px solid black;
    margin: auto;
}
h2{
    color: aliceblue;
    font-size: 20px;
 text-indent: 2em;
}
.biao{
    background-color:rgb(15, 124, 191) ;
    height: 40px;
    line-height: 40px;
}
h3{
    height: 30px;
    line-height: 30px;
    background-color: rgb(228, 241, 250);
    font-size: 16px;
    text-indent: 35px;
    color: rgb(15,124,191);
}
li{
    height: 30px;
    line-height: 30px;
    list-style: none;
    margin-left: 30px;
}
a{
    text-decoration: none;
  color: lightslategrey;
    font-size: 14px;
}
a:hover{
    color: coral;
    text-decoration: underline;
}
做出来的效果如下图
![在这里插入图片描述](https://img-blog.csdnimg.cn/f35d13030a8342b586153622c7ae9274.jpg#pic_center)

用无序列表制作菜单页面