底部多列导航应使用语义化footer包裹，内部用section或div分列，css采用grid布局（如auto-fit+minmax）实现响应式；列标题用h4，链接区分主次权重与颜色，避免下划线；移动端通过@media调整grid行列而非隐藏重写；版权信息需独立于网格、居中显示并动态生成年份。
底部多列导航用 footer + display: grid 最稳妥
直接用语义化 footer 包裹，内部用 section 或 div 划分列，CSS 用 grid 控制列数和间距。别用浮动或行内块——响应式撑开、对齐错乱、IE 兼容性差的问题都会冒出来。
常见错误是把所有链接塞进一个 ul 里再强行分列，结果语义混乱、屏幕阅读器识别困难、移动端点击热区小。
- 列数建议设为
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))，自动适配屏幕宽度 - 每列加
margin-bottom: 1.5rem（不是 padding），避免最后一行下方空白过大 - 列标题用
h4，别用strong或span，保证结构可访问性
链接文字大小和颜色要区分主次
底部导航不是主菜单，用户不会逐条扫描。关键信息（如“联系我们”“隐私政策”）用 font-weight: 600，次要链接（如“常见问题”“使用条款”）保持 font-weight: 400；颜色统一用 #666 或 #777，悬停时才变深（#333），避免视觉干扰。
容易踩的坑：给所有链接加 text-decoration: underline——底部空间紧凑，下划线会连成一片，反而降低可读性。只在悬停时加，或全都不加，靠颜色和间距区分。
- 外部链接（如 GitHub、微博图标）务必加
rel="noopener noreferrer" - 邮箱链接写成
mailto:contact@example.com，别用纯文本，否则无法唤起邮件客户端 - 电话链接用
tel:+8613800138000，注意加国际区号，iOS 才能点击拨打
移动端必须折叠成单列，但别用 display: none
很多实现直接在小屏下把多列设为 display: none 再另写一套单列结构，导致 DOM 重复、维护两套样式、SEO 友好性下降。正确做法是保留同一套 HTML，仅通过 @media 调整 grid 行列布局。
典型错误是只改 grid-template-columns 却忽略 grid-row-gap 和 padding，结果小屏下文字挤在一起、点击区域过小。
- 小屏断点建议用
@media (max-width: 768px)，不是480px（现在平板也占不小比例） - 折叠后每列用
grid-template-rows: auto，并设row-gap: 0.75rem保证呼吸感 - 列标题
h4的font-size小屏下调到0.9rem，避免文字撑出容器
版权信息单独放在最底部，不参与多列布局
版权行（© 2024 Company Name. All rights reserved.）必须脱离多列网格，用独立 div 放在 footer 底部，否则会被 grid 拉伸或错位。它和上面的导航列之间要有明确视觉分隔（比如 border-top: 1px solid #eee），但不能用额外的 hr 标签——语义不符，且默认 margin 不可控。
容易被忽略的是版权年份写死成 2024。如果网站长期维护，应动态生成，前端可用 new Date().getFullYear() 插入，后端模板更推荐用变量渲染。
- 版权行文字用
text-align: center，不要靠左或靠右 - 字体大小设为
0.85rem，比导航链接略小，体现层级关系 - 如果公司有备案号（如沪ICP备XXXXXX号），紧接在版权文字后，用相同字号和颜色，不加括号也不换行
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
