在网页开发中，列表是常用的元素之一，用于展示和组织内容。通过 CSS 样式，我们可以对列表进行美化和定制，提升用户体验。
1. 有序列表（Ordered List）
有序列表使用 <ol> 标签表示，每个列表项用 <li> 标签包裹。默认情况下，有序列表的列表项前面会显示数字序号。
示例：
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ol>
效果：
- 苹果
- 香蕉
- 橙子
2. 无序列表（Unordered List）
无序列表使用 <ul> 标签表示，每个列表项同样用 <li> 标签包裹。默认情况下，无序列表的列表项前面会显示一个小点。
示例：
<ul>
<li>红色</li>
<li>绿色</li>
<li>蓝色</li>
</ul>
效果：
- 红色
- 绿色
- 蓝色
3. 自定义列表（Custom List）
自定义列表使用 <ul> 标签表示，每个列表项同样用 <li> 标签包裹。我们可以使用 CSS 样式来自定义列表项的符号、形状或图标。
示例：
<ul class="custom-list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
CSS 样式：
.custom-list {
list-style-type: none; /* 移除默认符号 */
}
.custom-list li::before {
content: "\2713"; /* 使用 Unicode 对应的符号 */
margin-right: 5px;
}
效果： ✓ 苹果 ✓ 香蕉 ✓ 橙子
4. 嵌套列表（Nested List）
列表可以嵌套使用，即在列表项中再包含一个列表，形成层级结构。可以使用缩进或样式区分不同层级的列表项。
示例：
<ol>
<li>水果
<ul>
<li>苹果</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>胡萝卜</li>
<li>青菜</li>
</ul>
</li>
</ol>
效果：
- 水果
- 苹果
- 香蕉
- 蔬菜
- 胡萝卜
- 青菜
5. 悬停效果（Hover Effect）
使用 CSS 可以为列表项添加悬停效果，以提升交互体验。当鼠标悬停在列表项上时，可以改变背景色或添加阴影等效果。
示例：
<ul class="hover-list">
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
CSS 样式：
.hover-list li:hover {
background-color: #f2f2f2;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
效果：
- 悬停在苹果时，背景色和阴影改变
- 悬停在香蕉时，背景色和阴影改变
- 悬停在橙子时，背景色和阴影改变
总结
通过 CSS，我们可以对列表进行样式定制，使页面更加美观和易于阅读。列表样式的设计可以根据页面风格和需求，来调整符号、形状、颜色和动画等，以达到更好的展示效果。
