css grid 是管理后台分栏最直接可控的方式，核心用 grid-template-columns（如 240px 1fr），避免 float/inline-block；响应式需明确切换临界点，禁用已废弃的 frameset。

用 CSS Grid 控制管理后台的分栏比例最直接

HTML 本身没有“分栏布局”原生能力，所谓“管理系统分栏”，实际是靠 CSS 实现的视觉划分。Grid 是目前最干净、可控性最强的方式，尤其适合后台这种需要固定功能区（如左侧菜单栏 + 主内容区）的场景。

常见错误是硬套 float 或老式 display: inline-block，结果一加响应式就错位，或者宽度计算被 padding/margin 干扰。

• grid-template-columns 是核心：比如 240px 1fr 表示左侧固定 240px，右侧占满剩余空间；25% 75% 表示按百分比切分；1fr 2fr 1fr 表示三等分中中间宽两倍
• 避免用 px 写死所有栏宽，除非你确定永远不响应式。更推荐组合写法，例如 240px minmax(600px, 1fr)) —— 左侧固定，主内容区最小 600px，超出则自适应拉伸
• 注意 grid-gap（或 gap）会额外增加间距，如果已有 padding，容易撑出滚动条。调试时可临时设 outline: 1px solid red 看真实占位

Flexbox 分栏在窄屏下更容易崩，但适合动态宽度需求

如果你的管理后台要支持折叠侧边栏（比如点击按钮收起菜单），flex 比 grid 更好控制显隐逻辑，因为它的项目可以自然重排。

但要注意：Flex 默认单行，一旦容器变窄，flex-wrap: wrap 会让栏“掉下来”，这在后台页面里通常是不可接受的——用户不希望操作区突然换行。

• 用 flex-shrink: 0 锁死关键栏（如导航栏），防止被压缩变形
• 主内容区用 flex: 1，等价于 flex: 1 1 0，确保它吃掉所有剩余空间
• 不要依赖 width 配合 flex，两者冲突。该设 min-width 就设 min-width，别混用
• IE11 对 flex 支持有 bug，比如 flex: 1 在某些嵌套下失效，得补 flex-basis: 0

别碰 <frameset></frameset>，它在所有现代浏览器里已废弃

有些老系统文档还提 rows 和 cols 属性，那是 HTML 4.01 的 <frameset></frameset> 方案。它在 Chrome/Firefox/Edge 中早已完全禁用，打开就是白屏或报错 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

即使你看到能跑，那也只是浏览器兼容模式的苟延残喘，且存在严重问题：

• 每个 <frame> 是独立上下文，JS 无法跨 frame 直接通信，必须用 window.parent 或 postMessage，维护成本爆炸
• SEO 彻底失效，搜索引擎只抓主框架页，子页面内容不可见
• 移动端完全不可用，<frameset></frameset> 不支持 viewport 缩放和 touch 事件穿透
• 现代构建工具（Vite/Webpack）根本不支持打包成多个 HTML 入口再拼 frameset

响应式分栏切换的关键不是“怎么写”，而是“什么时候切”

很多开发者花半天调 @media，结果在 iPad 上还是错乱。根本原因是没定义清楚“切换临界点”的业务意义。

比如左侧菜单栏，在桌面端宽 240px，到平板横屏（768px）是否收为图标？还是等到竖屏（480px）才折叠？这个决策应基于操作习惯，而非像素值本身。

• 优先用 min-width 而非 max-width 媒体查询，避免多层嵌套时样式被意外覆盖
• 分栏比例切换点建议和设计稿断点对齐，例如：桌面端 240px / 1fr → 平板横屏 80px / 1fr → 手机端 100vw（单栏全屏）
• 用 prefers-reduced-motion 降级动画，比如折叠菜单时取消 width 过渡，改用 transform: translateX()，性能更稳
• 真正在意体验的话，加个 resize 监听器手动重算栏宽——仅限拖拽分栏场景，普通后台不用

真正难的不是写出三栏，而是让它们在数据加载、菜单展开、窗口缩放、屏幕旋转这些真实交互中始终稳定。别迷信“一套代码适配所有”，管理后台的分栏逻辑往往要和权限、模块加载状态耦合，CSS 只负责呈现，背后的数据驱动才是关键。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！