前端教学2:ul标签的应用场合与经典案例

<ul> 标签的应用场合与经典案例

一、<ul> 是什么

<ul> = Unordered List （无序列表），用于展示没有先后顺序 的一组并列项。浏览器默认在每个 <li> 前显示小圆点（●）。

与之对应的是 <ol>（Ordered List，有序列表，显示 1. 2. 3.）和 <dl>（Definition List，定义列表）。

二、<ul> 适合的场合

核心判断标准：列表项之间是并列关系，调换顺序不影响语义。

场合	示例
导航菜单	顶部导航栏、侧边栏菜单
目录/栏目	文章分类、产品分类
选项清单	功能列表、优缺点、注意事项
图文列表	商品列表、新闻列表、图片墙
面包屑导航	首页 > 产品 > 详情
页脚链接	友情链接、关于我们、联系我们

三、经典案例

案例 1：顶部导航栏（最经典）

<nav>
    <ul class="nav">
        <li><a href="#">首页</a></li>
        <li><a href="#">产品中心</a></li>
        <li><a href="#">新闻资讯</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

.nav {
    list-style: none;     /* 去掉默认小圆点 */
    padding: 0;
    margin: 0;
    display: flex;        /* 横向排列 */
    gap: 20px;
}
.nav a {
    text-decoration: none;
    color: #333;
}
.nav a:hover {
    color: #2c7a4b;
}

说明 ：几乎所有网站的导航都用 <ul> + <li> 结构，再配合 CSS 去除圆点、横向排列。

案例 2：商品列表（图文卡片）

<ul class="products">
    <li>
        <img src="img/product1.jpg" alt="">
        <h3>商品名称一</h3>
        <p>¥199</p>
    </li>
    <li>
        <img src="img/product2.jpg" alt="">
        <h3>商品名称二</h3>
        <p>¥299</p>
    </li>
    <li>
        <img src="img/product3.jpg" alt="">
        <h3>商品名称三</h3>
        <p>¥399</p>
    </li>
</ul>

.products {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.products li {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
}
.products img {
    max-width: 100%;
    height: 150px;
}

说明 ：电商网站的商品网格，每个 <li> 是一个独立卡片。

案例 3：面包屑导航

<ul class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a></li>
    <li>当前商品详情</li>
</ul>

.breadcrumb {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 8px;
}
.breadcrumb li:not(:last-child)::after {
    content: ">";
    margin-left: 8px;
    color: #999;
}

说明 ：面包屑用 <ul> 语义合理，因为每一级是并列的路径节点。

案例 4：无序列表的默认样式展示

<h3>旅游必备物品</h3>
<ul>
    <li>舒适的运动鞋</li>
    <li>防晒霜与遮阳帽</li>
    <li>便携水壶与充电宝</li>
</ul>

默认效果：

• ● 舒适的运动鞋
• ● 防晒霜与遮阳帽
• ● 便携水壶与充电宝

四、<ul> 与 <ol> 的选择判断

课堂上可以用一个简单的判断法：

判断问题	用 <ul>	用 <ol>
调换顺序会影响意思吗？	不影响	影响
项与项之间有先后/步骤关系吗？	没有	有
典型例子	菜单、分类、清单	步骤、排名、编号列表

举例对比：

<!-- 并列关系 → ul -->
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

<!-- 步骤关系 → ol -->
<ol>
    <li>打开冰箱</li>
    <li>拿出食材</li>
    <li>开始烹饪</li>
</ol>

五、使用要点（避坑提醒）

1. <ul> 的直接子元素只能是 <li> ，不能直接放 <p>、<div> 等。
2. 去掉默认样式时，记得同时清掉 list-style、padding、margin：

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

3. 想自定义小圆点，可用 list-style-type：

ul { list-style-type: disc; }   /* 实心圆 ● 默认 */
ul { list-style-type: circle; } /* 空心圆 ○ */
ul { list-style-type: square; } /* 方块 ■ */

4. 横向排列用 display: flex，不推荐用古老的 float。

建议把**案例 1（导航栏）**作为课堂演示，因为它是网页中最常见、最实用的 <ul> 应用场景。