使用HTML5的<nav>标签构建语义化导航结构，结合CSS的position: fixed实现固定定位、Flexbox实现弹性布局、媒体查询适配移动端，并通过JavaScript控制汉堡菜单显隐。
如果您希望在网页中创建一个既能在页面滚动时保持固定位置、又能适配不同屏幕尺寸的导航栏，HTML5 提供了语义化结构与现代 CSS 特性支持。以下是实现固定与响应式导航栏的具体方法：
一、使用 <nav> 语义化标签构建导航结构
HTML5 引入 <nav> 元素，用于明确标识页面中的主导航区域，提升可访问性与 SEO 可读性。该标签本身不带样式，需配合 CSS 实现视觉效果与行为控制。
1、在 <body> 内插入 <nav> 标签，并嵌套无序列表 <ul> 表示导航项。
2、为每个导航链接设置 <a> 标签，href 属性指向对应页面或锚点。
立即学习“前端免费学习笔记（深入）”；
3、为 <nav> 添加 class 属性，例如 class="main-nav"，便于后续 CSS 选择与样式绑定。
二、通过 position: fixed 实现固定定位
固定定位使导航栏脱离文档流并始终相对于视口固定显示，即使页面滚动也不会移出可视区域。需注意预留顶部空间防止内容被遮挡。
1、为 .main-nav 设置 CSS 属性：position: fixed; top: 0; width: 100%; z-index: 1000;
2、在 <body> 或 <main> 的顶部添加等高 margin-top 或 padding-top，数值等于导航栏高度（如 60px）。
3、为导航容器设置 background-color 和 box-shadow，确保视觉层次清晰且背景不透明。
三、利用 Flexbox 布局实现水平居中与弹性排列
Flexbox 可以轻松控制导航项的对齐方式、间距与换行行为，避免浮动或 inline-block 带来的布局陷阱，提升代码可维护性。
1、对 .main-nav ul 设置 display: flex; list-style: none; margin: 0; padding: 0;
2、对 li 元素设置 flex: 1; text-align: center;，使每个导航项平均分配宽度。
3、对 a 元素设置 display: block; padding: 16px 20px; text-decoration: none; color: #333;，确保点击区域完整且无下划线。
四、通过媒体查询实现响应式断点切换
当视口宽度缩小至移动端阈值时，需将水平导航收起为汉堡菜单，隐藏列表项并触发 JavaScript 控制显隐。媒体查询负责样式层面的条件切换。
1、在 CSS 中添加 @media screen and (max-width: 768px) { ... } 规则块。
2、在该规则内将 .main-nav ul 设置为 flex-direction: column; display: none;，并为 .menu-toggle 按钮设置 display: block;
3、为小屏下的 li 设置 width: 100%; border-bottom: 1px solid #eee;，形成垂直分隔列表样式。
五、添加 JavaScript 控制移动菜单展开/收起
纯 CSS 无法实现点击切换显隐状态，需借助 JavaScript 监听按钮点击事件，动态修改导航列表的 display 属性或切换 active 类名。
1、为汉堡按钮添加 id="menu-toggle"，为导航列表添加 id="nav-list"。
2、编写脚本：document.getElementById('menu-toggle').addEventListener('click', function() { ... });
3、在事件处理函数中执行 document.getElementById('nav-list').style.display = document.getElementById('nav-list').style.display === 'flex' ? 'none' : 'flex';
