页脚导航不该用包裹，应使用+；固定列数优先css grid，动态列数选flex；移动端需成对设置display: flex和flex-wrap: wrap；链接须满足颜色区分、对比度≥4.5:1、显眼:focus样式。

页脚导航该不该用 <nav></nav> 包裹

不该硬套。页脚链接多数属于辅助导航（如“隐私政策”“网站地图”），语义上不属于主导航流，直接套 <nav></nav> 反而干扰屏幕阅读器对主菜单的识别。用 <footer></footer> + <div class="footer-links"> 更轻量、更可控，也避免多个 <code><nav></nav> 造成 ARIA 逻辑混乱。

多列布局用 Flex 还是 Grid？看列数是否固定

列数稳定（比如固定 4 栏：公司、支持、法律、社交），优先用 CSS Grid：grid-template-columns: repeat(4, 1fr) —— 不用算百分比，不依赖换行逻辑，容器内内容再多也不会撑破。列数动态（比如 CMS 后台可增删栏目），选 Flex：flex-wrap: wrap + flex-basis: 22%（留出 gap 余量），否则子项宽度会因内容长度不均而错位。

别混用：display: grid 容器里塞 float 或 inline-block 子项，Safari 旧版和动态插入内容时极易渲染错乱。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

移动端堆叠失效？检查 flex-wrap 和断点值

常见错误是只写了 display: flex 却漏掉 flex-wrap: wrap，导致小屏下所有列强行挤在一行，溢出或触发横向滚动。正确写法必须成对出现：

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-col { flex-basis: 30%; }
@media (max-width: 768px) {
  .footer-col { flex-basis: 100%; }
}

断点设在 768px 是通用底线，但若页脚文字较多或图标密集，建议提前到 640px 并同步调小 font-size 和 padding，否则文字会糊在一起。

链接可访问性常被忽略的三个细节

• a:link 和 a:visited 必须颜色不同（如 #1a73e8 / #5f6368），否则用户无法判断是否点过“服务条款”
• 移除下划线可以，但得确保文字与背景对比度 ≥ 4.5:1 —— 用 Chrome DevTools 的无障碍检查器实测，深灰文字配深色页脚背景大概率不合格
• :focus 样式必须显眼（如 outline: 2px solid #1a73e8），键盘用户 Tab 切换时若看不见焦点，等于关闭了半数可访问入口

页脚不是“填完就算”的收尾区域，它承载着法律合规、信任建立和最后一跳的路径引导。最易被忽略的是：链接状态样式没做、对比度没验、Flex 漏写 flex-wrap —— 这三处一错，小屏崩、残障用户卡住、SEO 结构标记失真，问题全在上线后才暴露。