最稳妥写法是用包结构，避免堆砌；水平排列用display: flex和list-style: none；:hover需在.active前声明；移动端须设min-height: 44px确保触控体验。
导航栏结构怎么写才不容易错样式？
直接用 <nav></nav> 包住 <ul></ul> + <li> + <a></a> 是最稳妥的语义化写法。别用 <div> 堆，否则后期加无障碍支持或 SEO 优化时会多踩三四个坑。
<p>常见错误是把 <code><a></a> 直接塞进 <nav></nav> 里不套列表——这样既难对齐，又没法用 :nth-child 控制单个菜单项间距。
-
<li>必须包裹<a></a>，不能反过来 - 所有
<a></a>要加href属性（哪怕暂时写#），否则键盘 Tab 键无法聚焦 - 避免给
<ul></ul>设margin: 0后忘了清padding-left（浏览器默认有缩进）
水平排列菜单项的关键 CSS 是什么？
核心就两条：display: flex 和 list-style: none。别再用 float: left 或 inline-block 拼了，兼容性和维护成本都高。
示例中 <ul></ul> 是 Flex 容器，<li> 是子项，这样能天然解决对齐、等宽、间隔统一等问题。
立即学习“前端免费学习笔记（深入）”；
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
margin-right: 1rem;
}
nav a {
text-decoration: none;
color: #333;
padding: 0.5rem 1rem;
}
鼠标悬停和当前页高亮怎么写才不冲突？
顺序很重要：:hover 写在前面，.active 写在后面，否则 .active 的样式会被 :hover 覆盖。另外，.active 一定要加在 <a></a> 上，不是 <li>。
-
<a class="active">首页</a>才能精准控制当前页样式 - 悬停背景色建议用
background-color: #f0f0f0这类柔和值，别用纯黑/纯白，对比太强伤眼 - 如果用
border-bottom做激活态，注意别让悬停时 border 突然出现导致文字跳动（可提前设border-bottom: 2px solid transparent）
响应式折叠菜单要不要现在就加？
初级项目可以先不做 JavaScript 控制的下拉菜单，但至少要加一个基础断点：768px 下改成垂直堆叠 + 全宽。
重点不是“做没做折叠”，而是“有没有预留扩展位”。比如 <button></button> 占位符、aria-expanded 属性、max-height 过渡，这些留着以后加 JS 时不用重写 HTML 结构。
@media (max-width: 768px) {
nav ul {
flex-direction: column;
}
nav li {
margin-right: 0;
margin-bottom: 0.5rem;
}
}
真正容易被忽略的是：移动端点击区域太小。记得给 nav a 加 min-height: 44px（iOS 最小触控尺寸），别只靠 padding 应付。
