页脚需分层组织：导航类在上、法律归属类在底、中间留联系方式；多列链接用包裹，每列用与真实标题结构化；版权信息单独成行并沉底；备案号须为可点击链接；布局用flex-wrap+flex-basis实现响应式换行；链接颜色、焦点样式及对比度须符合无障碍标准。
页脚多列链接和版权信息不是随便堆在一起的，得按用户动线和语义逻辑分层组织：导航类内容放上面，法律与归属类内容垫底，中间留出联系方式或社交入口的空间。
多列链接用
页脚里的“关于我们”“服务支持”“隐私政策”这些是辅助导航，不是纯信息块。必须用 <nav aria-label="页脚快速导航"></nav> 包一层，屏幕阅读器才能识别这是可跳转的导航区域。每列用 <ul></ul> 结构化，标题用真实 <h3></h3>（不能是 <div class="title">），确保键盘 Tab 顺序和 DOM 顺序一致。
<ul><li>别把所有链接平铺在 <code><div> 里——后期加标题、调颜色、做焦点管理会非常麻烦
<li>每列 <code><ul></ul> 前加 <h3></h3>，比如“服务支持”，既提升语义，也方便 CSS 用 h3 + ul 统一控制间距
aria-label，例如 <a href="#" aria-label="关注我们的微信公众号"></a>
版权信息单独成行，放在页脚最底部
版权行不是多列的一部分，它要视觉上沉底、语义上独立。用 <p class="copyright"></p> 或直接 <small></small>（仅限补充说明，如备案号、开源许可等），主版权文字不套 <small></small>。
- 正确写法：
<footer><nav>...</nav><p>© 2024–2026 MySite. All rights reserved.</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></footer> - 备案号必须是可点击链接，且目标地址为
https://beian.miit.gov.cn，不能跳自家页面或写死文本 - 年份推荐写区间（如 2024–2026），避免每年手动改；若需动态，优先服务端渲染或构建时替换
布局用 Flex，小屏自动换行不靠媒体查询硬切
三列链接在桌面端横向排列，移动端垂直堆叠——这不是靠 @media 把 flex-direction 从 row 改成 column 实现的，而是用 flex-wrap: wrap + flex-basis 让它自然折行。
.footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }- 每列设
flex-basis: 30%（比width: 33.33%更稳，能自动容错四舍五入） - 小屏下不改
flex-direction，只调flex-basis: 100%，避免 DOM 和视觉顺序错位 - 用
gap控制列间距，别用margin，旧版 Safari 对后者支持差
颜色、焦点、对比度一个都不能少
页脚链接常被当成“次要内容”而忽略可访问性，但键盘用户、低视力用户全靠这些细节推进操作。
-
a:link和a:visited必须不同色（如 #007bff 和 #6a0dad），否则用户无法判断是否已点过“Cookie 声明” - 禁用
outline: none？可以，但必须提供明确替代，比如box-shadow: 0 0 0 2px #007bff - 深色背景上文字至少满足 WCAG AA 级对比度（4.5:1），用浏览器 DevTools 的无障碍面板实时检查
- 移动端字体建议
0.875rem，内边距减半，避免撑高视口影响手指点击
