是导航语义化与可访问性底线，多个导航区须独立包裹并设aria-label；禁用div模拟，优先flex布局；移动端用checkbox控制折叠，href必须真实有效。
用 <nav></nav> 包裹 <ul></ul> 是语义和可访问性底线
不加 <nav></nav> 也能显示导航，但读屏软件会把它当普通文本，SEO 也可能弱化权重。多个导航区（比如顶部 + 侧边 + 底部）必须各自独立套 <nav></nav>，且都带 aria-label，例如 <nav aria-label="主导航"></nav> 和 <nav aria-label="页脚导航"></nav>。
常见错误是把搜索框、登录按钮塞进同一个 <nav></nav> —— 它们不是导航项，该归入 <header></header> 或单独容器。
别用 <div class="nav"> 模拟，除非要兼容 IE8 及更老版本；现代项目优先用原生语义标签。
<h3>
<code>display: flex 布局比 float 更稳，但要注意默认行为
横向排列导航项，display: flex 是当前最可靠方案。关键 CSS 就这几行：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li { margin-right: 1rem; }
nav a { text-decoration: none; color: #333; }
nav li:last-child { margin-right: 0; }
margin-right 加在 <li> 上比加在 <a></a> 上更稳定，避免点击热区偏移；:last-child 清掉末尾多余间距是必要收尾。
如果右侧要对齐用户头像或登录入口，给对应 <li> 加 margin-left: auto; 即可，不用额外 wrapper。
别再用 float: left 配合 clear: both——塌陷风险高，移动端响应式难控制，且 inline-block 有看不见的空白符间隙，调试成本反而更高。
移动端折叠菜单不能只靠 :hover
:hover 在手机上基本无效，iOS Safari 对 :focus-within 支持也不稳定，纯 CSS 下拉菜单实际不可靠。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
最小可用折叠方案是用隐藏 checkbox 控制：
<input type="checkbox" id="menu-toggle"><label for="menu-toggle">☰</label> <nav><ul>...</ul></nav>
然后用 #menu-toggle:checked ~ nav ul { display: flex; } 触发展开。注意：~ 是通用兄弟选择器，要求 <nav></nav> 必须在 <input> 后面；label 的 for 值必须和 input 的 id 严格一致。
如果有 JS 框架（Vue/React）或 jQuery，优先用 class 切换控制显隐，语义清晰、状态可控、无障碍属性也更好同步。
文字长度不均时，justify-content: space-between 可能反而不均衡
当导航项文字差异大（如“首页” vs “关于我们”），space-between 会让中间空隙拉得过大，视觉失衡。
这时改用 justify-content: space-around 更合理：每个项左右留等量空间，整体更匀称。
另外，别忘了加 flex-wrap: wrap——尤其在小屏下，防止导航项被强行压缩或溢出容器；配合 media query 隐藏部分项前，先确保它能自然换行，而不是等错位了再补 JS。
最后提醒：所有链接的 href 值必须真实有效，别留 href="#" 占位；否则键盘用户按 Tab 键会跳到页面顶部，体验断裂。
