主内容区和侧边栏需语义清晰、布局稳定、响应友好：主内容用唯一，侧边栏用同级；flex布局控制宽度，移动端垂直堆叠；内容归属明确，避免滥用。

主内容区和侧边栏的划分，核心是语义清晰、布局稳定、响应友好。不能只靠视觉位置决定结构，得从 HTML 语义和 CSS 行为两个层面协同设计。

用对语义标签，先定角色再布局

主内容必须包裹在

标签内，且全页只能有一个；侧边栏必须用

，且它得和

同级，或作为其兄弟元素——不是子元素。别把

塞进

里，那会破坏语义层级，影响 SEO 和读屏器识别。导航栏（

）建议放在

内或紧随其后，属于页面级导航，不归入主内容流。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

Flex 布局控制宽度，别依赖 float 或 width 硬设

现代做法是用 display: flex 在一个外层容器（比如

或直接用

包裹两者）中并排安排

和

：

• 设 flex: 3（占约75%），承载文章列表、摘要、分页等核心内容
• 设 flex: 0 0 min(240px, 100vw)，既保证最小可用宽度，又防止小屏溢出
• 务必加 flex-shrink: 0，否则默认收缩会导致侧边栏被压缩甚至消失

移动端要“断开”并列，改用垂直堆叠

小屏幕下强行左右并排体验差。用媒体查询切换布局：

• 当视口宽度 ≤ 768px 时，让外层容器改为 flex-direction: column
• 可设 order: -1 提前渲染（比如放在 Banner 下、文章列表前），更符合阅读动线
• 避免用 display: none 彻底隐藏侧边栏——如果需要收起，应配合 inert 属性、aria-hidden="true" 和 transform: translateX(-100%)，确保辅助技术与键盘焦点同步处理

内容归属要明确，别滥用

博客首页的文章列表本身不需要每篇都套一层

。按时间顺序罗列的独立文章，直接用

即可。

适用于有统一主题的分组，比如“编辑推荐”“系列连载”这类带小标题的聚合区块。侧边栏里的“热门文章”“分类列表”可各自用

包裹，但前提是它们内部有明确标题（

或更高阶），否则纯属冗余。

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