第十一课

在网页布局中，列表是非常高频的标签，主要分为 无序列表 ul 和 有序列表 ol。浏览器自带的默认列表样式非常简陋：无序列表默认是黑色小圆点，有序列表默认是普通数字序号，样式单一、无法满足网页美化需求。
为了让页面更加精致美观，我们可以通过 CSS 对列表进行完全自定义美化。本文主要讲解两个核心实操：

1. 无序列表：将默认小圆点替换为自定义图片图标；
2. 有序列表：将默认数字修改为(1)、(2)、(3) 括号编号样式。
   注意
   图片路径必须正确：代码中使用的是相对路径，图片需要放在项目的 img 文件夹中，路径错误会导致图标不显示。
   图标尺寸适配：list-style-image 不能直接设置图片大小，建议提前制作 16px–24px 的小图标，适配文字高度。
   自由替换图标：只需修改 url 内的图片地址，即可快速切换爱心、星星、对勾等任意列表图标。