应使用 Grid 或 Flex 布局实现底部网站地图，按栏目分组（每列一个 footer-col），重置 ul/li 默认间距，确保链接可点击、可读、无障碍；响应式按内容密度而非设备宽度断点。
用 CSS 多列布局实现底部网站地图，别碰 columns 属性
多列布局（column-count 或 columns）看着省事，但对 ul + li 的链接列表来说，它会把单个 li 拆到不同列里——浏览器真这么干，用户点不到下半截链接。实际该用 display: grid 或 flex 控制列数，让每个“栏目”占一列，内部保持语义完整。
-
columns: 3会让一个li被截断分到第1列末尾和第2列开头，不可点击区域变大 - 真正可控的是按栏目分组：比如
<div class="footer-col"> <h4>产品</h4> <ul>...</ul> </div>，每组一个容器 - 用
grid-template-columns: repeat(4, 1fr)比浮动或 inline-block 更稳，响应式时改repeat(auto-fit, minmax(200px, 1fr)))
ul 和 li 的统一样式必须重置默认 margin/padding
不同浏览器对 ul 的 margin-top、padding-left 处理不一致，直接套样式会导致列高错位、首行缩进不齐。不是加个 list-style: none 就完事。
- 必加
ul { margin: 0; padding: 0; list-style: none; }，否则 Chrome 和 Safari 下底部留白高度差 8–12px -
li默认是块级，但若中间插了a标签，得确保a { display: block; padding: 4px 0; }，不然点击热区只在文字上 - 如果用了
font-size: 0清除 inline-block 间隙，记得在li上重设字体大小，否则链接全看不见
响应式断点要按内容密度切，不是按设备宽度硬切
底部导航栏的列数取决于栏目数量和单列最大宽度，不是“手机=1列、平板=2列、桌面=4列”这种固定套路。12个栏目在宽屏下塞4列很挤，不如3列+稍大字号。
- 推荐用
@media (max-width: 768px)切到 2 列，@media (max-width: 480px)切到 1 列，比查 UA 更可靠 - 每列
min-width: 180px是底线，再窄文字换行太碎，影响可读性 - 别用
vw设font-size，小屏下链接文字过小，用户眯眼也点不准
无障碍访问常被忽略：链接顺序和标题层级必须匹配 DOM 结构
屏幕阅读器按 HTML 顺序读取，如果靠 order 或 transform 视觉上调整列序，但 DOM 仍是线性排列，就会读成“关于我们→服务→产品→公司”，而视觉上是“产品→服务→关于我们→公司”，信息错位。
立即学习“前端免费学习笔记（深入）”；
- 每列用独立
div包裹，h4做栏目标题，且h4必须在ul前面，不能靠position: absolute盖上去 - 避免
tabindex="-1"或aria-hidden="true"隐藏任何链接，底部地图本就是导航入口 - 测试方法很简单：关掉样式，纯 HTML 打开，看是否仍能逻辑清晰地从左到右、从上到下读完所有栏目和链接
最麻烦的从来不是怎么排成多列，而是保证每一列里的链接都可聚焦、可读、不被截断——DOM 结构、CSS 流式控制、响应式阈值，三者稍有脱节，用户就卡在最后一屏动不了。
