极简导航应使用语义化HTML（）+ Flex布局，三行CSS实现：nav ul设display: flex并清默认padding，用gap控制间距，nav a设display: block和足够padding确保点击热区。
用 <nav></nav> + <ul></ul> + Flex 布局，三行 CSS 就能跑通极简风格导航，不需要框架、不用 JS、不碰表格。
为什么不能用 <table> 或一堆 <code><div>
<p>语义错位会直接导致读屏器把“首页”读成“第1行第1列”，搜索引擎也难识别这是主导航；<code><div> 堆砌则放弃所有结构优势，后期加响应式或高亮逻辑时反而要重写。真正省事的方式，是开头就选对标签：用 <code><nav></nav> 包住 <ul></ul>，每个导航项用 <li>，链接用 <a></a> —— 这套组合浏览器认、SEO 认、辅助工具也认。
display: flex 是极简布局的底线选择
display: flex 是极简布局的底线选择浮动（float: left）和行内块（display: inline-block）在小屏下容易因换行/空格产生不可控间隙，而 display: flex 一行就能解决对齐、等距、居中问题。关键点：
-
nav ul设display: flex，并清掉默认padding-left（加padding: 0或margin-inline-start: 0） - 用
gap: 1.25rem控制间距，比给每个<li>加margin-right更干净（自动避开末项多余空隙） -
nav a必须设display: block+padding: 0.5rem 1rem，否则只有文字可点，手机上极易点不准 - 如需兼容 IE11，
gap要降级为margin-right，且必须补一句nav li:last-child { margin-right: 0; }
当前页高亮必须靠 JS 或服务端动态加 class="active"
HTML 静态文件本身没法判断“我现在在哪一页”。硬编码所有页面都写 class="active" 会导致高亮错乱。可行方案只有两个：
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染时，根据请求路径注入
class="active"（适合 PHP / Node.js 等后端环境） - 前端 JS 判断：
window.location.pathname === "/about.html"时给对应<a></a>加 class；注意路径匹配要严谨，避免/about错判/about-me - 别用
href="#"占位 —— 上线前必须替换成真实路径，否则pathname匹配永远是"/"
移动端折叠菜单不是“极简”的必选项
纯静态单页导航项少于 5 个时，直接让 nav ul 在小屏下 flex-wrap: wrap + 适当缩小字体即可；强行加 hamburger 菜单反而引入 JS 依赖和额外样式复杂度。真要加折叠，记住两点：
- 基础结构仍从
<nav><ul></ul></nav>开始，JS 只负责切class控制显隐 - 折叠状态下的导航必须保持可键盘 Tab、可屏幕阅读器朗读，不能只靠
display: none
极简不是删代码，而是每行 HTML 和 CSS 都有明确目的：语义对、结构稳、交互可靠。最容易被忽略的是 nav a 的 display: block 和点击热区尺寸 —— 它不炫技，但决定用户第一次点是否成功。
