CSS入门：ol，ul列表用法详解（附案例）

最新推荐文章于 2024-09-10 10:47:21 发布

云桃桃前端

最新推荐文章于 2024-09-10 10:47:21 发布

阅读量4k

点赞数 20

分类专栏： CSS 基础文章标签： css 前端 css3 html5

本文链接：https://blog.csdn.net/u013179804/article/details/137961040

版权

CSS 基础专栏收录该内容

21 篇文章 5 订阅

订阅专栏

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

275篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

无序列表（<ul>）和有序列表（<ol>）是 HTML 中常用的列表标签。它们在网页中是一种灵活且功能强大的组合方式，能够帮助设计师和开发者有效地组织和展示网页内容，提高页面的可读性、可访问性和用户友好性。

ul：用于显示项目列表，项目之间没有顺序关系。默认使用实心圆（●）或者其他符号作为项目符号。
ol：用于显示项目序号列表，项目之间有顺序关系，通常用于列出步骤、排名等内容。默认使用数字（1, 2, 3...）作为项目序号，可以通过 CSS 修改序号样式。

通过使用无序列表和有序列表，可以使网页内容结构更加清晰，使用户更容易理解和浏览列表项内容。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>List Example</title>
  </head>
  <body>
    <h2>无序列表示例</h2>
    <ul>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li>
    </ul>

    <h2>有序列表示例</h2>
    <ol>
      <li>步骤一</li>
      <li>步骤二</li>
      <li>步骤三</li>
    </ol>
  </body>
</html>

默认效果如下。

它们适用于各种网页布局模块，例如一些常见的：

导航菜单：创建水平或垂直的一级或者多级导航菜单，提供网站内部链接或页面分类链接。比如，水平的：

垂直的：
产品列表：在电子商务网站或商品展示页面中，可以使用它们来展示产品列表，每个列表项代表一个产品。比如，淘宝的这块：
博客文章目录：在博客或文章页面中，可以使用它们来创建文章目录，方便读者快速导航到感兴趣的部分。这个就比较常见了。比如公众号的。
项目展示：在个人或团队作品展示页面中，可以用来展示项目列表，每个列表项可能包含项目的标题、简介和链接等信息。比如，soraWebui的。

总的来说，列表标签适用于一组需要展示有序或无序内容列表的网页布局模块，它们提供了统一性，灵活性和可定制性，可以根据需求进行样式设计和布局调整。

接下来我们一起来看看样式看细节吧。

样式属性

列表有这 3 种常见的 CSS 样式属性。

list-style-type：用于指定列表项的项目符号或序号的类型。
- 可用值包括 disc（实心圆点）、circle（空心圆圈）、square（实心方块）等（适用于无序列表），以及 decimal（十进制数字）、lower-roman（小写罗马数字）、upper-alpha（大写英文字母）等（适用于有序列表）。
- 示例：list-style-type: disc;（无序列表使用实心圆点）、list-style-type: decimal;（有序列表使用十进制数字）。
list-style-position：用于指定项目符号或序号的位置。
- 可用值包括 inside（在列表项内部）、outside（在列表项外部）。
- 示例：list-style-position: inside;（项目符号/序号在列表项内部）、list-style-position: outside;（项目符号/序号在列表项外部）。
list-style-image：用于指定自定义的项目符号的图像。
- 可以使用 url() 函数指定图像的路径。
- 示例：list-style-image: url('path/to/image.png');（使用自定义图像作为项目符号）。

以下示例，展示了如何使用这些属性来定义列表的样式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>List Style Example</title>
    <style>
      /* 定义无序列表的样式 */
      ul {
        list-style-type: circle; /* 实心圆圈作为项目符号 */
        list-style-position: inside; /* 项目符号在列表项内部 */
      }

      /* 定义有序列表的样式 */
      ol {
        list-style-type: upper-alpha; /* 大写英文字母作为序号 */
        list-style-position: outside; /* 序号在列表项外部 */
      }

      /* 定义自定义项目符号的样式 */
      .custom-list {
        list-style-image: url('img/icon-heart.png'); /* 自定义图像作为项目符号 */
      }
    </style>
  </head>
  <body>
    <h2>无序列表</h2>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>

    <h2>有序列表</h2>
    <ol>
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>

    <h2>自定义项目符号列表</h2>
    <ul class="custom-list">
      <li>自定义列表项 1</li>
      <li>自定义列表项 2</li>
      <li>自定义列表项 3</li>
    </ul>
  </body>
</html>

效果如下：

当然，列表样式也可以简写，简写的顺序是：list-style: list-style-type list-style-position list-style-image;，如果缺少上述的任一值，将会取其默认属性值。

但有时候呢，这些模式图标的类型不符合设计稿，又加上位置不好控制怎么办？那就可以把默认的样式图标给去掉。

其实在实际开发项目过程中，去掉样式的情况占 99% 以上，具体可参考我第一部分的一些网站截图，你也可以多看几个网站就知道了。虽然说，它们用的不一定都是 ul/ol，li，这种列表标签，但其实，用它们自带的样式的事极少极少的。

无图标的列表

要去掉列表的样式，可以使用 CSS 的 list-style-type 属性，并将其值设为 none。这样做可以移除列表项前面的默认样式（如项目符号或序号），以下是代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Remove List Style</title>
    <style>
      /* 去掉列表的默认样式和间距 */
      ul,
      ol {
        list-style-type: none; /* 将列表样式设为无 */
      }
    </style>
  </head>
  <body>
    <h2>无序列表</h2>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>

    <h2>有序列表</h2>
    <ol>
      <li>列表项 A</li>
      <li>列表项 B</li>
      <li>列表项 C</li>
    </ol>
  </body>
</html>

效果如下：

在上面的代码中，ul 和 ol 元素都被选择器选中，并使用 list-style-type: none; 将它们的列表样式设为无，这样就移除了列表项前面的默认样式。

通过这样，可以提供更大的自由度和灵活性，增强视觉统一性，能更好满足用户的定制化需求，从而实现更好的用户体验和视觉效果。因为，写页面的时候通常不用默认的样式规则，所以，注意：这也是写页面的时候，必须重置的一个项。

案例：自定义图标的导航列表

去掉默认样式以后呢，如果想自定义列表的图标和图标与内容的距离，可以怎么做呢？通过增加标签的形式放置在文本前面，就可以了。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      li {
        list-style-type: none;
      }
      /* 以上均为重置 */
      .list-box {
        margin: 20px;
        width: 800px;
      }
      /* 给li 增加背景色 */
      .list-box li {
        background-color: #f8b1a7;

        line-height: 30px;
        margin-bottom: 10px;

        cursor: pointer; /* 鼠标悬停时变成小手 */
      }
      /* 可以自由控制图片的大小，和上下左右的位置 */
      .list-icon {
        float: left;
        margin: 0px 10px 0px 10px;
        height: 30px;
        width: 21px;
        background-repeat: no-repeat;
        background-position: center center;
      }
      /* 图标是在iconfont找的，21*21像素 */
      .icon-heart {
        background-image: url(img/icon-heart.png);
      }
      .icon-news {
        background-image: url(img/icon-news.png);
      }
      .icon-study {
        background-image: url(img/icon-study.png);
      }
      .icon-more {
        background-image: url(img/icon-more.png);
      }
      .list-txt {
        color: #fff;
      }
    </style>
  </head>
  <body>
    <ul class="list-box">
      <li>
        <i class="list-icon icon-heart"></i>
        <span class="list-txt">心情树洞</span>
      </li>
      <li>
        <i class="list-icon icon-news"></i>
        <span class="list-txt">新闻资讯</span>
      </li>
      <li>
        <i class="list-icon icon-study"></i>
        <span class="list-txt">学习中心</span>
      </li>
      <li>
        <i class="list-icon icon-more"></i>
        <span class="list-txt">新闻资讯</span>
      </li>
      <li>
        <i class="list-icon icon-heart"></i>
        <span class="list-txt">心情树洞</span>
      </li>
      <li>
        <i class="list-icon icon-news"></i>
        <span class="list-txt">新闻资讯</span>
      </li>
      <li>
        <i class="list-icon icon-study"></i>
        <span class="list-txt">学习中心</span>
      </li>
      <li>
        <i class="list-icon icon-more"></i>
        <span class="list-txt">新闻资讯</span>
      </li>
    </ul>
  </body>
</html>

效果如下：