使用 html 5 和flexbox 可快速创建响应式导航菜单。首先构建语义化结构：用 <nav> 包裹无序列表，包含首页、关于我们、服务、联系等链接，提升seo 与可访问性。接着在 css 中将。navbar ul设为 display: flex，启用 弹性布局 ，通过 justify-content: space-around 实现菜单项水平均匀分布；去除默认样式，设置背景色、 内边距 及悬停效果，确保美观与交互性。最后添加媒体查询 @media (max-width: 768px)，将小屏幕下的 flex-direction 改为 column，使菜单垂直 堆叠，适配移动端。整个方案简洁高效，无需浮动或定位，维护方便，仅需注意清除列表符号与下划线等细节即可实现现代响应式导航栏。
用 html5 和 Flexbox 实现导航菜单非常简单，能快速构建响应式、对齐整齐的布局。弹性盒模型（Flexbox）让容器内的子元素可以自动调整尺寸，适应不同屏幕大小，特别适合做导航栏。
基本 HTML 结构
先写一个语义清晰的 HTML5 导航结构：
<nav class="navbar"> <ul> <li><a href="#home"> 首页 </a></li> <li><a href="#about"> 关于我们 </a></li> <li><a href="#services"> 服务 </a></li> <li><a href="#contact"> 联系 </a></li> </ul> </nav>
使用 nav 和 ul/li 是标准做法，有利于 SEO 和可访问性。
CSS 中启用 Flexbox
给 .navbar ul 设置为弹性容器，让列表项水平 排列 并均匀分布：
立即学习 “ 前端免费学习笔记（深入）”；
.navbar ul {display: flex; list-style: none; margin: 0; padding: 0; background-color: #333; justify-content: space-around;} .navbar a {display: block; color: white; text-decoration: none; padding: 1rem; text-align: center;} .navbar a:hover {background-color: #555;}
display: flex 启用 弹性布局；justify-content: space-around 让菜单项平均分布并留出间距。
响应式适配手机端
在小屏幕上，可以改为垂直堆叠或使用汉堡菜单。这里展示简单的堆叠方式：
@media (max-width: 768px) {.navbar ul { flex-direction: column;} }
当屏幕宽度小于 768px 时，菜单项会垂直 排列，更适合触摸操作。
基本上就这些。Flexbox 让导航布局变得直观高效，无需浮动或定位，代码更简洁，维护更容易。不复杂但容易忽略细节，比如清除默认的列表样式和链接下划线。搞定这些，就能快速上线一个现代风格的导航栏。
