必须用四层结构，因其符合语义化标准：为SEO和读屏器提供导航锚点，表无序集合，维持列表语义链，确保可聚焦、可点击且满足44×44px触控标准，缺一不可。

直接用

四层结构就能跑起来，不加 JS、不套框架、不写多余 class，5 分钟可上线。关键不是“怎么炫”，而是“怎么不崩”。

为什么必须用

而不是

堆砌

浏览器和读屏器只认 是可交互元素；

包文字再加 click 事件，键盘 Tab 焦点进不去，移动端点击热区只有文字宽高，44×44px 最低触控标准直接不达标。

• 是语义锚点：SEO 加权、屏幕阅读器按 Ctrl+Alt+Insert+N 可跳转，不是视觉装饰
• 表达“无序集合”，分类导航天然无顺序，用
  会误导辅助技术
• 是列表项容器，不能省——否则
  的语义链断裂，CSS 选择器 ul > li 失效
• 必须带 href（哪怕暂填 #），否则 :hover 和 :focus 在 Safari 中部分样式被屏蔽

display: flex 替代 float 或 inline-block 的实操要点

老式布局在小屏下极易换行错位、父容器塌陷、间隙不可控；display: flex 是当前最稳的起点，IE11 也支持。

• 给
  设 display: flex，不是给
  —— 后者保留语义容器职责
• 用 gap: 1rem 控制项间距，比 margin-right 干净；IE11 不支持 gap 时退回到 margin-inline-end: 1rem 并清最后一项
• 避免 white-space: nowrap —— 小屏会强制横向滚动；改用 flex-wrap: wrap + @media (max-width: 768px) 自然折行
• 必须设 display: block，否则点击热区仅限文字，悬停效果也只响应文字区域

移动端收起菜单不用 JS 的 CSS-only 方案

纯 CSS 实现汉堡菜单，加载失败也不瘫痪，适合静态站点或 CDN 托管场景。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• HTML 中放一个隐藏 和对应 ☰
• 内部
  默认 display: none，用 #menu-toggle:checked ~ nav ul 触发显示
• 必须加 position: absolute 或 top: 100%，否则下拉时页面重排跳动
• 必加，否则媒体查询失效

Safari 中 a:hover 失效的真正原因和修复

不是 CSS 写错了，是 Safari 对未访问链接（:link）和已访问链接（:visited）有硬性限制：hover 时不能改 background-color、border、transform 等属性，除非你显式声明基础样式。

• 统一加 a:link, a:visited { color: #333; text-decoration: none; }
• 再写 a:hover { background-color: #f0f0f0; } 才生效
• 不处理的话，iOS 用户会觉得“点不动”“没反馈”，尤其在微信内嵌浏览器中更明显
• 别依赖 !important 强刷，Safari 会静默忽略

最容易被忽略的是：每个 的 href 必须真实可达，上线前不能留 #；否则用户点进去是空白页，而你还在查 CSS 是否写了 display: block。

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