CSS基础教程（十四）列表：CSS列表，代码界的变形金刚，让你的列表从呆板到炫酷！-优快云博客

引言：列表不只是列表

在网页设计的广阔天地里，CSS列表就像是那个被低估的超级英雄。平时它默默无闻地排列着条目，一旦被正确激发，就能变身成为吸引眼球的焦点元素。

还记得那些年我们挤在<ul>和<li>标签里的时光吗？那时我们认为列表就是几个点或者数字加上文字。哦，多么天真的想法！如今的CSS列表已经进化成了导航菜单、产品展示、时间轴、甚至整个页面布局的基石。

准备好了吗？系好安全带，我们要开始这场CSS列表的深度之旅了！

一、CSS列表基础：不止是圆点和数字

在我们深入高级技巧之前，让我们先快速回顾一下基础知识。毕竟，即使是高楼大厦也需要坚实的地基。

1.1 列表类型：有序 vs 无序

HTML提供了两种主要列表类型：

<!-- 无序列表 - 默认带圆点 -->
<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>

<!-- 有序列表 - 默认带数字 -->
<ol>
  <li>第一步</li>
  <li>第二步</li>
  <li>第三步</li>
</ol>

1.2 自定义列表标记

厌倦了默认的圆点和数字？CSS提供了多种方式来美化它们：

ul {
  list-style-type: square; /* 方形 */
  /* 其他值: circle, disc, none */
}

ol {
  list-style-type: upper-roman; /* 罗马数字 */
  /* 其他值: lower-alpha, upper-alpha, decimal */
}

1.3 使用图片作为列表标记

想要更个性化的标记？图片来帮忙！

ul.custom {
  list-style-image: url('bullet.png');
}

但这种方法控制能力有限，更灵活的方式是使用伪元素：

ul.fancy-bullets li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('custom-bullet.png');
  background-size: cover;
  margin-right: 10px;
}

二、进阶列表样式技巧

现在我们已经掌握了基础，是时候提升一个Level了！

2.1 创建边框列表效果

让列表项看起来像精美的卡片：

.bordered-list li {
  padding: 15px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #f9f9f9;
  transition: all 0.3s ease;
}

.bordered-list li:hover {
  background: