1. 单栏布局（Single Column）
结构：内容从上到下垂直排列，无分栏。
特点：
简洁直观，适合移动端适配。
强调内容的连贯性。
应用场景：
移动端页面（如H5页面）。
个人博客、长文阅读页。
示意图：
|-|
| 页眉 |
|-|
| 内容区 |
|（垂直滚动阅读） |
|-|
| 页脚 |
|-|
2. 分栏布局（Multi-Column）
结构：页面分为左右或左中右多栏。
常见变体：
两栏布局：侧边栏（导航/广告） + 主内容区。
三栏布局：左右侧边栏 + 中间主内容（如新闻门户）。
特点：
信息分类清晰，适合内容复杂的网站。
需注意响应式适配（小屏时折叠侧边栏）。
应用场景：
企业官网（左侧导航）、电商网站（分类筛选+商品列表）。
示意图：
||
| 页眉 |
||
| 侧边栏 | 主内容区 |
||
| 页脚 |
||
3. 网格/卡片布局（Grid/Card Layout）
结构：内容以网格或卡片形式平铺排列。
特点：
视觉层次分明，适合图片或信息块的展示。
支持响应式设计（不同屏幕自动调整行列数）。
应用场景：
图片社交平台（如Pinterest）。
电商商品列表、仪表盘界面。
示意图：
||
| 页眉 |
||
| □ □ □ □ （卡片网格） |
| □ □ □ □ |
||
| 页脚 |
||
4. 全屏布局（Full-Screen）
结构：内容撑满整个屏幕，无滚动条或分屏切换。
常见形式：
视差滚动：背景固定，内容层滚动。
分屏显示：左右/上下分屏（如Landing Page）。
特点：
视觉冲击力强，适合展示品牌或产品。
应用场景：
产品宣传页、作品集网站。
示意图：
||
| 全屏背景图 + 标题/按钮 |
||
5. 导航固定布局（Fixed Navigation）
结构：导航栏（或侧边栏）固定在页面顶部/左侧。
特点：
用户随时可访问导航，提升操作效率。
可能占用部分屏幕空间。
应用场景：
后台管理系统（如Admin Dashboard）。
长页面（如文档网站）。
示意图：
||
| [固定导航栏] |
||
| 滚动内容区 |
||
6. 杂志/报刊布局（Magazine Layout）
结构：多栏混合，图文错落排列。
特点：
内容密度高，视觉丰富。
需注意排版节奏和留白。
应用场景：
新闻门户、媒体网站。
示意图：
||
| 头条新闻（大图+标题） |
||
| 小图 | 文字 | 广告 |
||
7. 弹窗/模态布局（Modal Layout）
结构：在页面上叠加弹窗或浮层。
特点：
聚焦用户操作（如登录、表单填写）。
可能打断用户流程。
应用场景：
登录/注册弹窗、提示信息。
示意图：
||
| 背景页面（半透明遮罩）|
||
| [弹窗内容居中显示] |
||
选择布局的建议：
1. 内容优先：根据信息类型（文字、图片、交互功能）选择布局。
2. 响应式适配：确保布局在移动端友好（如折叠侧边栏、卡片自适应）。
3. 用户体验：导航清晰、操作路径简洁。
通过组合以上布局，可以设计出灵活且符合用户习惯的网页结构。
