LabEx
登录免费加入

使用 CSS 属性美化列表

CSSBeginner
立即练习

介绍

在本实验中，学生将探索使用 CSS 设计列表的艺术，重点是将有序列表、无序列表和描述列表的默认外观进行转换。参与者将学习如何通过各种 CSS 属性（如 list-style-type、list-style-image 和 list-style-position）自定义列表标记，从而创建视觉上吸引人且独特的列表设计。

实验将引导学习者逐步创建一个包含不同列表类型的 HTML 项目，然后应用 CSS 技术来修改列表样式。通过本实验，学生将获得实际经验，包括更改列表标记类型、用自定义图像替换默认标记、调整标记位置以及使用简写的 list-style 属性高效地设计列表样式。

设置 HTML 项目并创建基本列表

在这一步中，你将设置一个基本的 HTML 项目并创建你的第一个列表，为探索 CSS 列表样式做好准备。我们将从创建一个简单的项目结构和一个包含不同类型列表的 HTML 文件开始。

首先，导航到项目目录：

cd ~/project

为你的 CSS 列表样式项目创建一个新目录：

mkdir css-list-styling
cd css-list-styling

现在，使用 WebIDE 创建一个名为 index.html 的 HTML 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
  </head>
  <body>
    <h1>我最喜欢的编程语言</h1>

    <h2>有序列表（带编号）</h2>
    <ol>
      <li>Python</li>
      <li>JavaScript</li>
      <li>Java</li>
      <li>C++</li>
    </ol>

    <h2>无序列表（带项目符号）</h2>
    <ul>
      <li>Web 开发</li>
      <li>数据科学</li>
      <li>机器学习</li>
      <li>移动应用</li>
    </ul>

    <h2>描述列表</h2>
    <dl>
      <dt>HTML</dt>
      <dd>用于网页结构的超文本标记语言</dd>
      <dt>CSS</dt>
      <dd>用于网页设计的层叠样式表</dd>
    </dl>
  </body>
</html>

这个 HTML 文件展示了三种类型的列表：

  1. 有序列表 (<ol>): 自动编号
  2. 无序列表 (<ul>): 使用默认的项目符号
  3. 描述列表 (<dl>): 用于术语和描述对

在浏览器中查看时的示例输出：

  • 有序列表将显示编号（1, 2, 3, 4）
  • 无序列表将显示项目符号
  • 描述列表将显示术语和描述

使用 list-style-type 更改列表标记

在这一步中，你将学习如何使用 list-style-type CSS 属性来自定义列表标记的外观。list-style-type 允许你将默认的项目符号或编号更改为各种预定义的样式。

在 WebIDE 中打开 index.html 文件，并在 <head> 中添加一个 <style> 部分来定义 CSS 规则：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling</title>
    <style>
      /* 无序列表样式 */
      .square-list {
        list-style-type: square;
      }

      .circle-list {
        list-style-type: circle;
      }

      .disc-list {
        list-style-type: disc;
      }

      /* 有序列表样式 */
      .decimal-list {
        list-style-type: decimal;
      }

      .lower-alpha-list {
        list-style-type: lower-alpha;
      }

      .upper-roman-list {
        list-style-type: upper-roman;
      }
    </style>
  </head>
  <body>
    <h1>列表样式类型示例</h1>

    <h2>无序列表样式</h2>
    <ul class="square-list">
      <li>方形标记</li>
      <li>Web 开发</li>
      <li>设计技术</li>
    </ul>

    <ul class="circle-list">
      <li>圆形标记</li>
      <li>编程</li>
      <li>软件工程</li>
    </ul>

    <h2>有序列表样式</h2>
    <ol class="decimal-list">
      <li>十进制数字</li>
      <li>标准编号</li>
      <li>默认样式</li>
    </ol>

    <ol class="lower-alpha-list">
      <li>小写字母</li>
      <li>字母顺序</li>
      <li>a, b, c 样式</li>
    </ol>

    <ol class="upper-roman-list">
      <li>大写罗马数字</li>
      <li>经典编号</li>
      <li>I, II, III 样式</li>
    </ol>
  </body>
</html>

关键的 list-style-type 值：

  • 无序列表：disc（默认）、circle、square
  • 有序列表：decimal、lower-alpha、upper-roman 等

在浏览器中的示例输出：

  • 第一个无序列表显示方形标记
  • 第二个无序列表显示圆形标记
  • 第一个有序列表显示十进制数字
  • 第二个有序列表显示小写字母
  • 第三个有序列表显示大写罗马数字

使用 list-style-image 替换默认标记

在这一步中，你将学习如何使用 list-style-image 将默认的列表标记替换为自定义图像。首先，你需要下载一些示例图标作为列表标记。

在你的项目中创建一个 images 目录：

cd ~/project/css-list-styling
mkdir images

使用 curl 下载示例图标：

curl -o images/check-icon.png https://labex.io/courses/icons/check-icon.png
curl -o images/star-icon.png https://labex.io/courses/icons/star-icon.png

现在，更新你的 index.html 文件以包含自定义列表标记图像：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS List Styling with Images</title>
    <style>
      .check-list {
        list-style-image: url("images/check-icon.png");
      }

      .star-list {
        list-style-image: url("images/star-icon.png");
      }

      /* 如果需要，调整图标大小 */
      .check-list li,
      .star-list li {
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <h1>使用图像的自定义列表标记</h1>

    <h2>待办事项清单</h2>
    <ul class="check-list">
      <li>完成 CSS 教程</li>
      <li>练习列表样式</li>
      <li>创建 Web 项目</li>
    </ul>

    <h2>最喜欢的主题</h2>
    <ul class="star-list">
      <li>Web 开发</li>
      <li>设计原则</li>
      <li>用户体验</li>
    </ul>
  </body>
</html>

关于 list-style-image 的关键点：

  • 使用 url() 指定图像路径
  • 用自定义图像替换默认列表标记
  • 适用于有序和无序列表
  • 图像大小可以通过 CSS 内边距控制

在浏览器中的示例输出：

  • 带有勾选图标标记的待办事项清单
  • 带有星形图标标记的最喜欢主题列表

调整 list-style-position 以控制标记位置

在这一步中，你将探索 list-style-position CSS 属性，该属性控制列表标记相对于列表内容的位置。此属性有两个主要值：outside（默认）和 inside。

更新你的 index.html 文件以展示不同的列表标记位置：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>List Style Position</title>
    <style>
      .outside-list {
        list-style-position: outside;
        background-color: #f0f0f0;
        padding: 10px;
        width: 300px;
      }

      .inside-list {
        list-style-position: inside;
        background-color: #e0e0e0;
        padding: 10px;
        width: 300px;
      }

      /* 添加一些视觉分隔 */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>列表标记位置演示</h1>

    <h2>外部列表标记（默认）</h2>
    <ul class="outside-list">
      <li>标记位于内容区域外部</li>
      <li>默认的 CSS 行为</li>
      <li>标记与文本左侧对齐</li>
    </ul>

    <h2>内部列表标记</h2>
    <ul class="inside-list">
      <li>标记位于内容区域内部</li>
      <li>标记是列表项文本的一部分</li>
      <li>内容紧接在标记之后开始</li>
    </ul>
  </body>
</html>

关于 list-style-position 的关键点：

  • outside：标记位于内容框外部（默认）
  • inside：标记位于内容框内部
  • 影响列表项的布局和对齐
  • 适用于创建紧凑或视觉上独特的列表

在浏览器中的示例输出：

  • 外部列表：标记位于文本左侧
  • 内部列表：标记位于文本区域内
  • 背景颜色有助于可视化差异

使用简写属性 list-style 组合列表样式

在这一步中，你将学习如何使用简写的 list-style 属性将多个列表样式属性组合在一个声明中。该属性允许你在一行中设置 list-style-type、list-style-image 和 list-style-position。

更新你的 index.html 文件以展示简写的 list-style 属性：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Shorthand List Styles</title>
    <style>
      /* 使用类型和位置的简写 */
      .todo-list {
        list-style: square inside;
      }

      /* 使用图像和位置的简写 */
      .project-list {
        list-style: inside url("images/star-icon.png");
      }

      /* 使用类型、图像和位置的完整简写 */
      .complete-list {
        list-style: lower-roman inside url("images/check-icon.png");
      }

      /* 重置为默认值 */
      .default-list {
        list-style: initial;
      }

      /* 移除列表样式 */
      .no-style-list {
        list-style: none;
      }

      /* 添加一些间距以提高可读性 */
      li {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>简写列表样式演示</h1>

    <h2>待办事项列表（方形标记）</h2>
    <ul class="todo-list">
      <li>学习 CSS 列表样式</li>
      <li>练习简写属性</li>
      <li>创建时尚的列表</li>
    </ul>

    <h2>项目列表（星形图标）</h2>
    <ul class="project-list">
      <li>Web 开发项目</li>
      <li>设计系统</li>
      <li>交互式教程</li>
    </ul>

    <h2>已完成项目（勾选图标）</h2>
    <ol class="complete-list">
      <li>CSS 基础</li>
      <li>响应式设计</li>
      <li>高级样式技术</li>
    </ol>

    <h2>无样式列表</h2>
    <ul class="no-style-list">
      <li>移除列表标记</li>
      <li>干净的无样式列表</li>
      <li>无视觉指示器</li>
    </ul>
  </body>
</html>

关于 list-style 简写的关键点：

  • 组合了 list-style-type、list-style-image 和 list-style-position
  • 大多数值的顺序无关紧要
  • none 移除所有列表样式
  • initial 重置为默认浏览器样式

示例简写组合：

  • list-style: square inside;
  • list-style: inside url('image.png');
  • list-style: lower-roman inside url('icon.png');

总结

在本实验中，参与者通过创建一个包含各种列表类型（如有序列表、无序列表和描述列表）的 HTML 项目，探索了 CSS 列表样式技术。实验引导学习者使用 CSS 属性（如 list-style-type、list-style-image 和 list-style-position）自定义列表外观。

动手练习展示了如何修改默认列表标记、用自定义图像替换标准项目符号以及调整标记位置，提供了使用 CSS 属性增强网页设计和改进列表视觉呈现的实用技能。

相关 CSS 课程
CSS 入门教程

CSS 入门教程

cssweb-development
构建一个井字棋网页应用

构建一个井字棋网页应用

javascriptweb-development
创建打地鼠网页游戏

创建打地鼠网页游戏

javascriptweb-development