本文介绍如何摒弃嵌套无序列表的错误用法，改用语义化的 、 和 元素，结合现代 CSS Flexbox 实现三列垂直对齐的页脚链接区域，兼顾可访问性、维护性与视觉一致性。
本文介绍如何摒弃嵌套无序列表的错误用法，改用语义化的 `
在构建页脚导航时，语义正确性与布局逻辑同样重要。原始方案中将多个 <ul></ul> 直接混入一个父 <ul></ul>（如 <ul>
<ul>CONTACTS</ul>
<li>link1</li>…</ul>）不仅违反 HTML 规范（<ul></ul> 的合法子元素仅限 <li>），更导致语义混乱——屏幕阅读器无法识别栏目分组，CSS 也难以精准控制各列独立样式。
✅ 正确做法是：使用 <footer></footer> 定义页脚区域，每个栏目（如 CONTACTS、LINKS、MAPS）用 <div> 包裹，内部以 <code><h4></h4> 做标题、<nav></nav> 包含一组导航链接 <a></a>。这种结构天然支持无障碍访问（<nav></nav> 自动映射 navigation ARIA role），且为 Flexbox 布局提供清晰的层级基础。
以下是完整实现代码：
<footer>
<div>
<h4>Contacts</h4>
<nav>
<a href="https://www.php.cn/link/f6bc3ec91160f7a8c1d098e42c72ed1f">Email us</a>
<a href="#phone">Call now</a>
<a href="#address">Visit office</a>
</nav>
</div>
<div>
<h4>Links</h4>
<nav>
<a href="/about">About</a>
<a href="/privacy">Privacy Policy</a>
</nav>
</div>
<div>
<h4>Maps</h4>
<nav>
<a href="/location">Our Location</a>
</nav>
</div>
</footer>对应 CSS 推荐如下（已优化移动端适配与可读性）：
立即学习“前端免费学习笔记（深入）”；
footer {
margin: 0 -1em -1em; /* 拉伸至视口边缘，抵消 body 默认外边距 */
padding: 1.5em 2em;
background-color: #333;
display: flex;
gap: 2.5em; /* 列间间距 */
flex-wrap: wrap; /* 支持小屏换行 */
color: white;
}
/* 所有链接统一样式 */
footer a {
color: inherit;
text-decoration: none;
font-size: 0.95rem;
line-height: 1.6;
}
footer a:hover {
color: #ffd700; /* 金色悬停态，提升交互反馈 */
text-decoration: underline;
}
footer h4 {
margin: 0 0 0.75em 0;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-size: 0.875rem;
}
/* 每列容器：垂直堆叠 */
footer > div {
display: flex;
flex-direction: column;
gap: 0.5em;
}
/* 导航链接组：紧凑垂直排列 */
footer nav {
display: flex;
flex-direction: column;
gap: 4px;
}
/* 响应式增强：小屏单列显示 */
@media (max-width: 768px) {
footer {
flex-direction: column;
align-items: center;
text-align: center;
}
footer > div {
width: 100%;
max-width: 300px;
}
}⚠️ 注意事项：
-
禁止滥用
<ul></ul>：导航不是“项目列表”，而是功能区域，<nav></nav>+<a></a>是 W3C 推荐的现代语义方案； -
避免固定高度：原
.endpage { height: 100px }易导致内容截断，应由内容自然撑开高度； -
慎用
position: fixed：页脚通常应为文档流内元素（<footer></footer>），除非明确需要悬浮效果；若需底部吸附，推荐position: sticky或 CSS Grid 布局； -
可访问性验证：确保所有链接有有意义的文本（避免纯
href="#"），并测试键盘 Tab 导航与屏幕阅读器播报顺序。
通过语义化结构与现代 CSS 的协同，你不仅能实现美观的三列页脚，更能交付符合 Web 标准、易于维护且对所有人友好的网页体验。
