使用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 类使用鲜明颜色突出当前页面。

chartjs-reporter

此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

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

响应式适配（移动端）

当屏幕变窄时，使用媒体查询将导航栏折叠为汉堡菜单或垂直堆叠显示。

@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 方案更轻量

基本上就这些。结构清晰、样式简洁，就能实现美观又实用的响应式导航栏。