nav + ul + li 是最直接、语义正确且无需 js 的导航结构，必须用 nav 而非 div 以保障无障碍识别与 seo；flex 布局优于 float/inline-block；移动端需用 checkbox + ~ 选择器实现折叠；当前页须加 aria-current="page" 并确保链接文字自解释。
nav + ul + li 是最直接、语义正确且无需 JS 就能跑起来的组合，别绕开它去用 div 堆导航。
为什么必须用 nav 包裹 ul 而不是 div
浏览器和读屏软件靠 nav 识别“这是主导航区”，div class="nav" 对辅助技术来说只是个普通容器。SEO 和无障碍支持都弱一截。更实际的问题是：如果后续加键盘焦点管理或 aria-current="page"，没 nav 就等于白搭。别为省一个标签名牺牲可维护性。
display: flex 比 float 或 inline-block 更稳
老方案里用 float: left 容易塌陷，得额外加 overflow: hidden 或伪元素清除；inline-block 会因换行符产生看不见的空白间隙，导致间距失控。Flex 一行解决：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 1.2rem;
}
nav li:last-child {
margin-right: 0;
}
nav a {
display: block;
padding: 0.75rem 1.25rem;
text-decoration: none;
color: #333;
}
注意：把 margin-right 放在 li 上，不是 a 上——否则点击热区边缘会漏掉，尤其在小屏上。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
移动端折叠菜单不能只靠 :hover
手机没 hover，iOS Safari 对 :focus-within 支持也不统一。最小可用方案是用 checkbox 控制显隐：
-
<input type="checkbox" id="menu-toggle">放在nav前面 -
<label for="menu-toggle">☰</label>必须带for属性，值与id严格一致 - CSS 里写
#menu-toggle:checked ~ nav ul { display: flex; }，注意~是通用兄弟选择器，结构不能错 - 别用
button直接 toggle，屏幕阅读器无法同步状态
如果项目已引入 JS 框架（如 Vue 或 React），优先用 class 切换控制显示，比纯 CSS 方案更可控、可测试。
当前页高亮和可访问性容易被跳过
很多教程只教加 class="active" 和对应 CSS，但真正关键的是：aria-current="page" 必须加在当前链接上，例如 @#@#@#@#@#@#@#@#@#@0。这个属性才是读屏软件判断“你现在在哪”的依据。另外，所有链接文字必须自解释，避免“点击查看”“更多”这类空泛词——对视觉障碍用户来说，它们等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
