必须用包页脚链接，因其提供语义化分组、支持无障碍识别、便于批量样式控制和结构扩展；配合flex-wrap: wrap、768px断点、a:focus可访问样式及合理间距方案，才能实现健壮响应式页脚。
页脚链接列表不是往 <footer></footer> 里堆 @#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1 看似省事，但问题一堆：无法批量加样式（比如统一缩进或顶部边框）、没语义层级、屏幕阅读器读不出“这是个链接组”、后续加标题或图标时结构混乱。
-
<ul></ul>明确表达“这是一组并列的导航项”，对 SEO 和无障碍都关键 - 每个链接套在
<li>里，才能用li:first-child或li:last-child精准控制首尾间距 - 想加“关于我们”这类分组标题？直接插在
<ul></ul>外、<li>上方就行，结构干净
flex-wrap: wrap 是多列页脚的生命线
很多人设了 display: flex 却发现三列链接在手机上横向滚动——因为默认 flex-wrap: nowrap，子项死活不换行。
- 必须显式写
flex-wrap: wrap，否则flex-basis: 30%或width: 33.333%全无效 -
flex-basis: 30%比width: 30%更稳：它让 Flex 容器优先按比例分配空间，自动吃掉间隙，避免因四舍五入导致最后一列掉行 - 别用
gap代替margin：在 Flex 容器里，gap是标准且安全的间距方案；margin在某些旧版 Safari 会失效
移动端断点设 768px 而不是 480px
现在主流手机横屏宽度普遍超 480px，硬切 480px 断点会导致 iPad 竖屏仍显示多列，文字过小难点击。
- 用
@media (max-width: 768px)切换为flex-direction: column，所有列垂直堆叠，符合手指操作习惯 - 此时把每列
flex-basis改成100%，确保单列占满全宽，不留空白 - 顺便调小
font-size和padding：移动端页脚字体建议0.875rem，内边距减半，避免撑高视口
a:focus 样式不是可选项
页脚链接常被当成“次要内容”跳过焦点样式，结果键盘用户 Tab 到这儿就彻底迷失——看不见当前聚焦的是哪条链接。
- 禁用
outline: none必须配替代方案：比如加box-shadow: 0 0 0 2px #007bff -
a:link和a:visited颜色要区分（如蓝色 vs 紫色），否则用户无法判断是否已点过“Cookie 声明” - 深色背景页脚里，浅灰文字（
#999）对比度常低于 WCAG 4.5:1，用浏览器 DevTools 的无障碍面板实测，不够就加亮
真正麻烦的从来不是写几行 HTML，而是当页脚里塞进“微信公众号二维码”“下载 App 按钮”“多语言切换器”这些非链接元素时，如何保持语义清晰又不破坏 Flex/Grid 流。这时候得靠 <div class="footer-utility"> 单独包裹，而不是硬塞进 <code><ul></ul> ——结构松动比样式错位更难修。
