用语义化 结构，a 设 display:block，flex 布局，transition 动画；移动端用 checkbox+label+:checked 实现下拉；Safari 需定义 a:link,a:visited 基础样式；固定定位时 body 加 padding-top 避免遮挡；兼顾键盘导航与屏幕阅读器。
怎么用纯 HTML + CSS 写一个能点、能 hover、不闪退的导航栏
不是套模板，是真能跑起来的导航栏：点击跳转、鼠标悬停有反馈、小屏幕自动收起（可选）、不依赖 JS 也能基本可用。关键在语义化结构 + 简洁 CSS 控制流。
常见错误现象：ul 里套 div、用 float 死磕对齐、a 标签没设 display: block 导致点击热区极小、hover 效果只加在文字上却忘了整个菜单项。
- 用
<nav></nav>包住<ul></ul>，每个菜单项是<li><a href="...">首页</a></li> -
a必须加display: inline-block或display: block，不然 hover 和点击只响应文字区域 - 横向排列优先用
display: flex，别碰float—— 它会让父容器高度塌陷，且移动端适配极难 - hover 效果写在
a上，不是li；背景色/下划线变化要加transition，否则“啪”一下切换很生硬
移动端下拉菜单怎么不用 JS 实现（CSS only）
用 checkbox + label 模拟开关，配合 :checked 伪类控制菜单显隐。比监听 click 事件更轻量，也避免了 JS 加载失败导致菜单完全不可用的问题。
使用场景：小屏幕（max-width: 768px）下把横向菜单收成「三道杠」按钮，点开才显示列表。
立即学习“前端免费学习笔记（深入）”；
- HTML 中放一个隐藏的
<input type="checkbox" id="menu-toggle">和对应<label for="menu-toggle">☰</label> - 菜单
ul默认display: none，当#menu-toggle:checked ~ nav ul时设为display: block（注意选择器顺序） - 必须加
position: absolute或top: 100%让下拉层不撑开布局，否则页面会跳动 - 别忘了给移动端加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 CSS 媒体查询失效
为什么 nav a:hover 在 Safari 里没反应
因为 Safari 对未访问过的链接（:link）和已访问过的（:visited）有严格样式限制：hover 时不能改 color 以外的多数属性，比如 background-color、border、transform 都会被忽略——除非你显式定义了 :link 和 :visited 的基础样式。
性能影响：不处理的话，用户会觉得菜单“点不动”“没反馈”，尤其在 iOS 上更明显。
- 给所有导航链接统一加
a:link, a:visited { color: #333; text-decoration: none; } - hover 样式写成
a:hover, a:focus { background-color: #f0f0f0; }，确保:focus同时生效（键盘用户也需要） - 如果要用
transform: scale()这类动画，必须搭配will-change: transform，否则 Safari 渲染卡顿
导航栏固定在顶部后，正文内容被遮挡怎么办
这是 position: fixed 最典型的副作用：脱离文档流，导致后续内容从页面顶部开始渲染，直接叠在导航栏下面。解决方法不是调 z-index，而是给 body 或第一块正文加等高 margin-top 或 padding-top。
兼容性影响：Chrome/Firefox 表现一致，但 iOS Safari 在 fixed 元素内滚动时可能触发回弹或闪烁，需额外处理。
- 导航栏高度是
60px，就在body上加padding-top: 60px（不是margin-top，避免 margin 折叠） - 如果导航栏高度响应式变化（比如小屏缩到
50px），就用 CSS 变量：:root { --nav-height: 60px; }，然后body { padding-top: var(--nav-height); } - 绝对不要用
top: 0+margin-top: -60px这种负边距 hack，会导致打印样式、无障碍阅读器识别错乱
Tab 切换焦点路径，也没验证过屏幕阅读器能否正确 announce 菜单项。这两点一旦漏掉，就不是“不好看”，而是“不可用”。 
