纯HTML+CSS可实现可访问、响应式、稳定侧边栏，关键在于语义结构（nav/ul/li/a）、Flex布局控制（flex: 0 0 240px + flex: 1）和媒体查询精准切换（min-width: 769px显示，max-width: 768px隐藏），JS仅用于增强。
纯 HTML + CSS 就能做出可访问、可响应、不闪退的侧边栏，JS 只是锦上添花。关键不在“怎么加个 div”，而在语义结构、Flex 流控制和媒体查询的配合时机。
用 <nav> + <ul> 搭语义结构，别碰 <div class="sidebar">
浏览器和读屏器只认 <nav><ul><li><a> 这条链。插一层 <div>，Tab 键就跳过整个菜单，SEO 权重直接降级，:focus-within 和下拉定位也会失效。
-
<nav aria-label="侧边导航">必须加aria-label，否则多个<nav>时读屏器分不清哪个是侧边栏 - 非导航内容（如 logo、搜索框、用户头像）别塞进
<nav>，单独放外面或用<aside> - 子菜单必须是对应
<li>的直接子<ul>，写在<nav>底部再用position: absolute硬拉上去，滚动时大概率飘出屏幕
Flex 布局控制流向，flex: 0 0 240px 比 width: 240px 更稳
桌面端靠 Flex 解耦尺寸，主内容用 flex: 1 自动填满剩余空间；移动端靠媒体查询切显隐，而不是靠 JS 动态改 style.width。
- 外层容器设
display: flex; min-height: 100vh;，别用height: 100%—— 它依赖父级高度，容易塌 - 侧边栏加
flex: 0 0 240px;（不伸展、不收缩、固定宽），别用float或inline-block，它们无法响应flex-wrap - 主内容区加
flex: 1; overflow-y: auto;，防长内容溢出且遮挡侧边栏 - 想让侧边栏滚动时固定？加
position: sticky; top: 1rem;，但前提是其父容器不能有transform或overflow: hidden
移动端收起靠 display: none + checkbox 模拟开关，不是靠 JS 控制 visibility
小屏下默认隐藏侧边栏，用 <input type="checkbox" id="sidebar-toggle"> 绑定 <label for="sidebar-toggle"> 触发显示，CSS 控制显隐逻辑 —— 这样即使 JS 失效，菜单仍可用，且兼容 IE9+。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 桌面端写
@media (min-width: 769px) { #sidebar { display: block; } }，别漏掉这条，否则开发时看着是竖排，实际是文档流错乱 - 移动端用
@media (max-width: 768px) { #sidebar { display: none; } .sidebar-open #sidebar { display: block; } }，JS 只负责切.sidebar-open类到<body> - 别给菜单链接写
href="#"，点完页面滚顶；空操作链接用href="javascript:void(0)"或去掉href，补role="button" - 展开后立刻把焦点移到第一个
<a>：用document.querySelector('#sidebar a').focus()，否则键盘用户得狂按 Tab 才进得去
高亮当前项靠服务端渲染或 URL 匹配，别全靠 JS 记状态
前端 JS 控制 current 类极易漏掉 history 回退、刷新、前进等场景。最可靠的是靠路由匹配或服务端注入 aria-current="page"。
- CSS 中写
a[aria-current="page"] { background: #007bff; color: white; }，比手动加.active类更语义、更健壮 - 如果用前端路由（如 React Router），确保每次导航后都同步更新
aria-current，而不是只在挂载时设一次 - 别用
:target做高亮 —— 它依赖 URL fragment（如#dashboard），现代 SPA 路由基本不用 fragment
最容易被忽略的其实是焦点管理和语义隔离：一个页面里同时有顶部主导航和侧边功能导航，必须用不同 aria-label 区分；侧边栏展开后若没主动聚焦第一个链接，键盘用户就卡在空白里——这比样式错位更致命。
