在本实验中，学生将探索使用 CSS 设计列表的艺术，重点是将有序列表、无序列表和描述列表的默认外观进行转换。参与者将学习如何通过各种 CSS 属性（如 list-style-type、list-style-image 和 list-style-position）自定义列表标记，从而创建视觉上吸引人且独特的列表设计。
实验将引导学习者逐步创建一个包含不同列表类型的 HTML 项目，然后应用 CSS 技术来修改列表样式。通过本实验，学生将获得实际经验，包括更改列表标记类型、用自定义图像替换默认标记、调整标记位置以及使用简写的 list-style 属性高效地设计列表样式。
在这一步中，你将设置一个基本的 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 文件展示了三种类型的列表：
<ol>): 自动编号<ul>): 使用默认的项目符号<dl>): 用于术语和描述对在浏览器中查看时的示例输出：
在这一步中，你将学习如何使用 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、squaredecimal、lower-alpha、upper-roman 等在浏览器中的示例输出：
在这一步中，你将学习如何使用 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() 指定图像路径在浏览器中的示例输出：
在这一步中，你将探索 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-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-positionnone 移除所有列表样式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 属性增强网页设计和改进列表视觉呈现的实用技能。
