底部导航必须用包裹，因其是HTML5语义化标签，浏览器、读屏器和搜索引擎依赖它识别导航区；用会导致可访问性失效、Tab顺序错乱、SEO权重下降。
底部导航必须用 <nav></nav> 包裹，不是可选项
浏览器、读屏器、搜索引擎靠 <nav></nav> 识别“这是导航区”，写成 <div class="bottom-nav"> 看起来一样，但键盘 Tab 顺序可能错乱，辅助技术直接忽略整个区域。常见错误包括把版权信息、联系方式塞进同一个 <code><nav></nav>——它们属于页脚（<footer></footer>），语义混杂会导致读屏器播报混乱。
display: flex 是当前最稳的横向布局方案
老式 float: left 或 display: inline-block 在小屏下极易崩：换行空格产生间隙、父容器高度塌陷、点击区域错位。Flex 布局现代浏览器全覆盖（IE11 除外），一行代码就能对齐、等宽、居中。
- 用
gap控制项间距，比给每个<a></a>加margin-right干净得多，也避免“最后一个要不要清 margin”的纠结 - 别在
<nav></nav>上设white-space: nowrap——小屏会强制横向滚动；改用flex-wrap: wrap+ 媒体查询自然折行 - 移动端若需图标+文字垂直堆叠，给
.item设flex-direction: column，再用align-items: center
当前页高亮必须靠 JS 动态判断路径
HTML 本身无法感知“我现在在哪一页”，硬编码 class="active" 到所有页面里是典型维护噩梦。路径匹配稍有偏差（比如 /about vs /about/ 或哈希路由 #!/projects）就会失效。
- 前端简单判断逻辑（建议放
