零基础5分钟搭后台管理页骨架：仅需一个index.html，用flex布局划分顶部导航、左侧菜单、主内容区三块，配合height:100vh、flex:1和checkbox实现收起/展开，主内容区设overflow-y:auto确保滚动。
零基础做后台管理页，别从“完整系统”想，先搭出能跑起来的骨架——它只需要一个 index.html 文件、三块固定区域（顶部导航、左侧菜单、主内容区），再加一点基础 CSS 控制布局，5 分钟就能看到效果。
用 flexbox 布局快速划分三大区域
后台页面最怕写一堆 float 或绝对定位，一改就崩。直接用 display: flex 搞定垂直方向分层，再嵌套一层水平 flex 处理左右结构。
关键点：
- 外层容器设
height: 100vh，否则内容区撑不满视口 - 顶部高度固定（比如
60px），左侧菜单设最小宽度（220px），主内容区用flex: 1自适应剩余空间 - 避免给内部元素设
position: absolute—— 它会脱离 flex 流，后续加滚动条或响应式时容易错位
示例结构片段：
立即学习“前端免费学习笔记（深入）”；
<div class="layout">
<header class="header">后台管理系统</header>
<div class="main-content">
<aside class="sidebar"><nav><a href="#">用户管理</a></nav></aside>
<main class="content"><h2>欢迎页</h2></main>
</div>
</div>让左侧菜单收起/展开不靠 JS 框架，只用原生 checkbox + :checked
很多新手一上来就想用 Vue 或 React 实现菜单折叠，其实纯 HTML/CSS 就能搞定基础交互，且零依赖。
原理：隐藏一个 <input type="checkbox">，用相邻兄弟选择器 ~ 控制菜单宽度变化。
实操注意：
-
<input>必须放在<aside>前面，且和菜单是同级元素 - 菜单初始设
width: 220px；input:checked ~ .sidebar改为width: 64px（只留图标） - 菜单项文字用
overflow: hidden+white-space: nowrap配合宽度变化自动隐藏 - 别忘了加过渡动画：
transition: width 0.2s ease，否则切换生硬
主内容区默认加滚动，但禁止父容器溢出
后台页面内容常动态加载，主区域必须可滚动，但常见错误是给 .content 设 height: 100% 却没限制父容器高度，导致滚动失效或整个页面滚。
正确做法：
- 确保
.main-content有明确高度（比如calc(100vh - 60px)，减去 header 高度） -
.content自身设overflow-y: auto，且不要设固定height—— 让它随内容自然撑开，超出才滚动 - 如果内容区里嵌了表格或长表单，记得给
table加width: 100%，否则可能破出容器 - 避免在
.content上用position: absolute—— 它会脱离文档流，滚动条可能不出现
真正卡住新手的不是写不出代码，而是不知道哪些地方“必须写死”（比如 height: 100vh）、哪些地方“必须留活”（比如主内容区高度用 auto 而非固定值）。骨架阶段，先跑通布局和基础交互，后面再逐个替换为真实数据和路由逻辑。
