CSS美化列表需重置默认样式，用list-style:none配合::before自定义图标，flex布局实现响应式横竖切换，并确保交互反馈与语义正确。
用 CSS 控制 ul 和 ol 的基础样式
浏览器默认的列表样式很朴素，ul 是实心圆点，ol 是阿拉伯数字，而且缩进和间距不统一。美化第一步是重置默认行为：list-style 控制标记类型，padding-left 和 margin 调整位置。
-
list-style: none彻底去掉原生标记，后续用::before自定义更灵活 - 想换图标？
list-style-image: url(./icon.png)可行，但对 SVG 支持不稳定，推荐用背景图或伪元素 -
list-style-position: inside让标记“进文本流”，避免文字折行时悬空；outside（默认）更常见，但需配合padding-left避免被截断
给 li 加图标或序号——用 ::before 更可控
直接改 list-style 选项少、对齐难，用伪元素能精准控制大小、颜色、间距，还能塞 SVG 或 Unicode 符号。
ul.custom li {
position: relative;
padding-left: 28px;
}
ul.custom li::before {
content: "✓";
position: absolute;
left: 0;
color: #4CAF50;
font-weight: bold;
}
- 用
content: "•"、"→"或url("data:image/svg+xml,...")嵌入小 SVG - 必须设
position: relative在li上，否则::before的absolute会相对于父容器定位 - 避免用
list-style-type: square后再加伪元素——两者会叠加，造成视觉混乱
响应式列表布局：从竖排变横排或网格
个人页面常需把导航类列表、技能标签、项目列表在小屏竖排、大屏横排。别硬写多个 HTML，用 CSS 流式控制更干净。
-
display: flex+flex-wrap: wrap是首选，比inline-block更好控间距和对齐 - 横排时加
gap: 12px替代老式margin-right，避免最后一个元素多出空白 - 用
@media (max-width: 768px)把flex-direction: row切回column，别忘了重置gap值 - 若内容长度差异大，
flex: 1 1 auto让项等宽伸缩，比固定width更健壮
交互反馈：鼠标悬停和焦点状态别漏掉
列表项如果是链接或可点击区域（比如技能标签跳转锚点），没有 hover 或 focus 样式会显得死板，也影响可访问性。
立即学习“前端免费学习笔记（深入）”；
-
a:hover加下划线或背景色可以，但别只靠颜色变化——色觉障碍用户可能看不出 - 用
outline: 2px solid #2196F3响应键盘 Tab 焦点，别写outline: none除非你提供了替代焦点样式 - 对非链接的
li（如纯展示技能项），加cursor: pointer和轻微transform: translateY(-1px)悬停提升点击暗示 - 过渡动画加在
background-color或color上比加transform更省性能
ul 做横向导航时，屏幕阅读器仍按列表播报，这是合理的；但若把 div 硬套成“看起来像列表”的结构，就丢了语义，还徒增 ARIA 修补成本。美化之前，先确认这个列表在 DOM 里是否真该是 ul 或 ol。 
