单栏布局

Single Column Layout

布局模式也叫：单列布局、居中单栏、一栏式布局、One Column

一句话：页面只有一条居中的内容主列，所有区块从上往下依次排列，没有侧边栏，常用于手机端和结构简单的页面。

详细解释

单栏布局是最简单的页面结构：整个页面只有一列内容，标题、说明、主体、按钮都在这一列里从上到下排。桌面端通常给这一列设一个最大宽度（比如 720px 或 960px）并水平居中，两边留白。

它的好处是阅读路线只有一条，用户不会被左右两侧的东西分散注意力；它也天然适配手机屏幕，几乎不需要额外的响应式改造。

缺点是横向空间利用率低。如果页面既有导航、筛选，又有辅助信息，全塞进一列会让页面变得很长，这时应该考虑「侧边导航+内容」或「圣杯布局」。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

页面用单栏布局：所有内容放在一列里，最大宽度 720px、水平居中，两侧留白；区块从上到下依次是标题、说明文字、主体内容、底部操作按钮，区块之间间距 24px。不要加侧边栏；手机上这一列占满宽度，左右留 16px 内边距。

一条限定最大宽度、水平居中的内容主列；页头、各内容区块、页脚全部沿这一列从上到下堆叠。