2. Flex 布局：三行 CSS 搞定横向排列

目标是让

• 给 ul 设 display: flex，它就变成 Flex 容器，子项（li）默认横向排列
• 加 list-style: none 去掉圆点，margin: 0; padding: 0 清除默认边距
• 给 li 设 margin-right: 1rem 控制项间距离（最后一项可选用 :last-child 去掉右距）

.navbar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  margin-right: 1rem;
}

.navbar li:last-child {
  margin-right: 0;
}

3. 美化与交互：加点实用细节

纯布局只是开始，加几行就能提升体验：

立即学习“前端免费学习笔记（深入）”；

• a 标签默认有下划线且颜色偏蓝，建议重置：text-decoration: none; color: inherit;
• 让点击区域更大更友好：给 a 加 padding: 0.75rem 1rem，并设 display: block
• 鼠标悬停时加背景或文字变色：.navbar a:hover { background: #eee; border-radius: 4px; }
• 如果想让导航居中或靠右，直接在 ul 上加 justify-content: center 或 flex-end

4. 响应式小提示：手机上收起菜单？先做好基础再加媒体查询

新手不必一上来就做汉堡菜单。先把桌面端 Flex 导航写稳，再用 @media 在小屏下改成竖排：

• 比如加一句：@media (max-width: 768px) { .navbar ul { flex-direction: column; } }
• 同时把 li 的 margin-right 改成 margin-bottom，适配竖向流
• 这样结构不变，只改布局方向，逻辑清晰，容易调试