使用HTML的ul和li构建导航结构，为当前页链接添加.active类高亮；2. CSS通过Flexbox实现横向布局，:hover触发平滑悬停效果，.active突出当前页面；3. 媒体查询在屏幕宽度≤768px时将flex-direction设为column，实现移动端垂直堆叠，链接间添加边框分隔；4. 通过transition优化背景色变化动画，可结合JavaScript动态控制active类或汉堡菜单显隐，确保桌面与移动设备均具备良好交互体验。
实现一个响应式导航栏，并带有高亮当前页面和悬停效果，是网页设计中的常见需求。关键在于结合 HTML 结构、CSS 媒体查询与伪类的合理使用，确保在桌面端和移动端都能有良好的交互体验。
HTML 结构设计
导航栏通常使用 ul 和 li 构建列表结构，每个链接对应一个菜单项。为当前页面对应的链接添加 .active 类，用于高亮显示。
CSS 样式与悬停效果
通过 CSS 设置导航栏布局，使用 Flexbox 实现横向排列，并定义悬停和激活状态的视觉反馈。
.navbar { display: flex; background-color: #333; list-style: none; margin: 0; padding: 0; } .navbar a { color: white; text-decoration: none; padding: 14px 20px; display: block; transition: background-color 0.3s ease; } .navbar a:hover { background-color: #555; } .navbar a.active { background-color: #007cba; font-weight: bold; }说明：hover 效果通过 :hover 实现平滑背景色变化；active 类使用鲜明颜色突出当前页面。
立即学习“前端免费学习笔记（深入）”；
响应式适配（移动端）
当屏幕变窄时，使用媒体查询将导航栏折叠为汉堡菜单或垂直堆叠显示。
@media (max-width: 768px) { .navbar { flex-direction: column; } .navbar a { text-align: center; border-bottom: 1px solid #444; } }在小屏幕上，flex-direction 改为 column，使菜单垂直排列。每个链接加上下边框以区分项，提升可读性。
增强交互建议
- 使用 transition 让背景色变化更自然
- active 类可通过 JavaScript 动态添加，根据当前 URL 自动高亮
- 若需汉堡菜单，可配合 JS 控制显隐，但纯 CSS 方案更轻量
