页脚链接必须用 ul 包裹，确保语义正确、可访问性与可维护性；flex 布局需显式设 flex-wrap: wrap 和 gap；移动端断点取 768px 更合理；target="_blank" 必须配 rel="noopener noreferrer"。
footer 里直接堆 a 标签是错的，页面短时页脚悬空、移动端挤成一行、键盘用户无法聚焦——问题不在 CSS 写得少，而在 HTML 结构没立住。
为什么必须用 ul 包友情链接
语义和可维护性都卡在这一步：ul 明确告诉浏览器“这是一组并列链接”，屏幕阅读器能读出“列表，共 5 项”，SEO 也更容易识别导航意图。平铺写 a 看似省事，但后续加标题、调首尾间距、批量改颜色全得靠 hack。
- 每个链接必须套在
li里，否则li:first-child和li:last-child这类精准控制失效 - 想在“合作伙伴”前加个
h3？直接放ul外面就行，结构干净不嵌套 - 不用
nav套页脚链接：它专指主导航，页脚属于辅助引用，div class="footer-links"更轻量可控
flex-wrap: wrap 是多列页脚的生命线
很多人设了 display: flex 却发现三列链接在手机上横向滚动——因为默认 flex-wrap: nowrap，子项死活不换行。不显式写 flex-wrap: wrap，后面所有 flex-basis 或 width 都白搭。
- 用
flex-basis: 30%比width: 33.333%更稳：Flex 容器会自动分配剩余间隙，避免四舍五入导致最后一列掉行 -
gap: 2rem是标准间距方案，比margin更可靠，旧版 Safari 对后者支持不一致 - 别在 Flex 容器里混用
float或inline-block，动态插入内容时容易渲染错乱
移动端断点设 @media (max-width: 768px) 而不是 480px
现在主流手机横屏宽度普遍超 480px，硬切 480px 会导致 iPad 竖屏仍显示多列、文字过小难点击。768px 是更实际的分水岭。
- 小屏下设
flex-direction: column，所有列垂直堆叠，符合手指操作习惯 - 此时把每列
flex-basis改成100%，确保单列占满全宽，不留空白 - 顺手调小
font-size: 0.875rem和padding，避免撑高视口影响首屏体验
target="_blank" 必须配 rel="noopener noreferrer"
只写 target="_blank" 会让新页面拿到 window.opener 权限，恶意站点可能执行 opener.location = "https://phishing.site" 劫持原页面——这不是理论漏洞，Chrome/Firefox 已实际拦截。
-
rel="noopener"切断 opener 引用，防止跳转劫持 -
rel="noreferrer"避免 Referer 泄露当前 URL（比如含用户 ID 的路径） - 不要只写
rel="noopener"：旧版 Safari 对单值支持不稳定，双写最稳妥 - 示例：
@#@#@#@#@#@#@#@#@#@0
真正麻烦的从来不是写几行 HTML，而是当页脚里塞进“微信公众号二维码”“下载 App”之后，才发现 flex-basis 算崩了、focus 样式没定义、深色背景上文字对比度不够——这些细节不提前测，上线后只能靠用户反馈来修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
