页脚应使用语义化包裹，但需用Flex或Grid配合flex-wrap: wrap或grid-template-columns: repeat(3, 1fr)实现响应式多列布局，小屏下通过媒体查询设为垂直堆叠，并用结构化链接以提升可维护性。

页脚用 <footer></footer> 包裹，但别只放它

浏览器默认不给 <footer></footer> 加样式，也不自动换行或对齐。直接写一堆 <a></a> 会挤成一行、文字重叠、移动端全崩。必须手动控制布局和响应式。

• 语义上 <footer></footer> 是正确选择，但视觉上它只是个容器，得靠 CSS 控制列数、间距、断点
• 避免嵌套 <nav></nav> 冗余：页脚链接通常不属主导航，用 <div class="footer-links"> 更轻量且可控 <li>别用 <code>float 布局——IE 兼容已不是刚需，Flex 或 Grid 更稳，也少踩清除浮动的坑

用 Flex 实现三列等宽链接，flex-wrap: wrap 是关键

多列在小屏上必须折行，否则溢出或横向滚动。纯 display: flex 默认不换行，得显式加 flex-wrap: wrap，再配合 flex-basis 控制单列宽度。

• flex-basis: 30% 比 width: 30% 更可靠——它让子项优先按比例分配空间，Flex 容器会自动处理剩余间隙
• 每列用 <ul></ul> 包链接，比平铺 <a></a> 更易维护（比如加标题、统一缩进）
• 移动端断点建议设在 768px：低于此值时设 flex-direction: column，所有列垂直堆叠

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

grid-template-columns: repeat(3, 1fr) 更适合固定列数场景

如果页脚栏目数量稳定（比如“关于我们｜服务支持｜法律条款｜关注我们”四列），CSS Grid 比 Flex 更直观，不用算百分比，也不依赖 flex-wrap 的隐式行为。


财经HTML高端海报生成
复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP
下载
• repeat(3, 1fr) 表示三等分，内容再多也不会撑破容器；加 gap 控制列间距，比 margin 更干净
• Grid 在 Safari 旧版（@supports (display: grid) 回退到 Flex
• 别在 Grid 容器里混用 float 或 inline-block，会导致渲染错乱，尤其在动态插入内容时

链接颜色、下划线、焦点态这些细节容易被忽略

页脚链接常被当成“次要内容”而忽略可访问性。用户用键盘 Tab 切换时，若 :focus 样式没定义，根本不知道当前焦点在哪；纯灰色文字在深色背景上对比度不足，会被 WCAG 判为不合格。

立即学习“前端免费学习笔记（深入）”；

• a:link 和 a:visited 必须区分颜色（比如蓝/紫），否则用户无法判断是否已点过某链接
• 移除下划线？可以，但得确保颜色对比度 ≥ 4.5:1（用浏览器 DevTools 的无障碍面板检查）
• a:focus 至少要有 outline 或同等明显的高亮，禁用 outline: none 除非提供替代方案
• 图标链接（如微信、微博）必须带 aria-label，否则屏幕阅读器读不出用途
页脚不是“写完 HTML 就扔那儿”的部分，列数、断点、焦点、对比度——每个点都在真实用户操作路径上，漏一个，就可能卡住某类人。