极简导航应使用语义化HTML（）+ Flex布局，三行CSS实现：nav ul设display: flex并清默认padding，用gap控制间距，nav a设display: block和足够padding确保点击热区。

用

+

+ Flex 布局，三行 CSS 就能跑通极简风格导航，不需要框架、不用 JS、不碰表格。

为什么不能用 或一堆

语义错位会直接导致读屏器把“首页”读成“第1行第1列”，搜索引擎也难识别这是主导航；

堆砌则放弃所有结构优势，后期加响应式或高亮逻辑时反而要重写。真正省事的方式，是开头就选对标签：用

包住

，每个导航项用

，链接用 —— 这套组合浏览器认、SEO 认、辅助工具也认。

display: flex 是极简布局的底线选择

浮动（float: left）和行内块（display: inline-block）在小屏下容易因换行/空格产生不可控间隙，而 display: flex 一行就能解决对齐、等距、居中问题。关键点：

• nav ul 设 display: flex，并清掉默认 padding-left（加 padding: 0 或 margin-inline-start: 0）
• 用 gap: 1.25rem 控制间距，比给每个
• 加 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" 会导致高亮错乱。可行方案只有两个：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 服务端渲染时，根据请求路径注入 class="active"（适合 PHP / Node.js 等后端环境）
• 前端 JS 判断：window.location.pathname === "/about.html" 时给对应 加 class；注意路径匹配要严谨，避免 /about 错判 /about-me
• 别用 href="#" 占位 —— 上线前必须替换成真实路径，否则 pathname 匹配永远是 "/"

移动端折叠菜单不是“极简”的必选项

纯静态单页导航项少于 5 个时，直接让 nav ul 在小屏下 flex-wrap: wrap + 适当缩小字体即可；强行加 hamburger 菜单反而引入 JS 依赖和额外样式复杂度。真要加折叠，记住两点：

• 基础结构仍从
  开始，JS 只负责切 class 控制显隐
• 折叠状态下的导航必须保持可键盘 Tab、可屏幕阅读器朗读，不能只靠 display: none

极简不是删代码，而是每行 HTML 和 CSS 都有明确目的：语义对、结构稳、交互可靠。最容易被忽略的是 nav a 的 display: block 和点击热区尺寸 —— 它不炫技，但决定用户第一次点是否成功。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！