# 网页布局排版方法总结 - ASCII可视化指南（完整增强版） ## 目录 1. [Grid网格布局模式](#一grid网格布局模式) 2. [Flexbox布局模式](#二flexbox布局模式) 3. [图层叠加与定位模式](#三图层叠加与定位模式) 4. [响应式布局转换](#四响应式布局转换) 5. [间距系统对比](#五间距系统对比) 6. [排版层次结构](#六排版层次结构) 7. [实用布局组合示例](#七实用布局组合示例) 8. [Hero区域布局模式](#八hero区域布局模式) ⭐ 新增 9. [导航栏布局模式](#九导航栏布局模式) ⭐ 新增 10. [Agent头像区布局](#十agent头像区布局) ⭐ 新增 11. [Stats统计数据布局](#十一stats统计数据布局) ⭐ 新增 12. [Footer总结区布局](#十二footer总结区布局) ⭐ 新增 13. [关键CSS属性速查表](#十三关键css属性速查表) 14. [常见问题解决方案](#十四常见问题解决方案) 15. [最佳实践总结](#十五最佳实践总结) --- ## 一、Grid网格布局模式 ### 1. Grid-2 布局（2列并排） ``` ┌─────────────────────────────────────────────────────────────┐ │ 容器 (.grid-2) │ │ grid-template-columns: repeat(2, 1fr) │ ├─────────────────────────────┬───────────────────────────────┤ │ │ │ │ 卡片 1 │ 卡片 2 │ │ (50% 宽度) │ (50% 宽度) │ │ │ │ │ ┌─────────────┐ │ ┌─────────────┐ │ │ │ 图片 │ │ │ 图片 │ │ │ │ 16:9 比例 │ │ │ 16:9 比例 │ │ │ └─────────────┘ │ └─────────────┘ │ │ ┌─────────────┐ │ ┌─────────────┐ │ │ │ 标题 │ │ │ 标题 │ │ │ ├─────────────┤ │ ├─────────────┤ │ │ │ 内容 │ │ │ 内容 │ │ │ └─────────────┘ │ └─────────────┘ │ │ │ │ └─────────────────────────────┴───────────────────────────────┘ CSS 代码： .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-2xl); } 适用场景： - 对比展示（如：功能对比、前后对比） - 大尺寸内容展示 - 左右分栏布局 ``` ### 2. Grid-3 布局（3列并排） ``` ┌───────────────────────────────────────────────────────────────────────────┐ │ 容器 (.grid-3) │ │ grid-template-columns: repeat(3, 1fr) │ ├───────────────────────┬───────────────────────┬───────────────────────────┤ │ │ │ │ │ 卡片 1 │ 卡片 2 │ 卡片 3 │ │ (33.33% 宽度) │ (33.33% 宽度) │ (33.33% 宽度) │ │ │ │ │ │ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │ │ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │ │ │ 16:9 │ │ │ 16:9 │ │ │ 16:9 │ │ │ └─────────┘ │ └─────────┘ │ └─────────┘ │ │ ┌─────────┐ │ ┌─────────┐ │ ┌─────────┐ │ │ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │ │ ├─────────┤ │ ├─────────┤ │ ├─────────┤ │ │ │ 内容 │ │ │ 内容 │ │ │ 内容 │ │ │ └─────────┘ │ └─────────┘ │ └─────────┘ │ │ │ │ │ └───────────────────────┴───────────────────────┴───────────────────────────┘ CSS 代码： .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); } 适用场景： - 三要素展示（如：特点、优势、功能） - 项目案例展示 - 服务项目列表 - 成果展示区 ``` ### 3. Grid-4 布局（4列并排） ``` ┌─────────────────────────────────────────────────────────────────────────────────────────┐ │ 容器 (.grid-4) │ │ grid-template-columns: repeat(4, 1fr) │ ├──────────────────┬──────────────────┬──────────────────┬──────────────────────────────┤ │ │ │ │ │ │ 卡片 1 │ 卡片 2 │ 卡片 3 │ 卡片 4 │ │ (25% 宽度) │ (25% 宽度) │ (25% 宽度) │ (25% 宽度) │ │ │ │ │ │ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ │ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │ │ 图片 │ │ │ │ 3:2 │ │ │ 3:2 │ │ │ 3:2 │ │ │ 3:2 │ │ │ └────────┘ │ └────────┘ │ └────────┘ │ └────────┘ │ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ ┌────────┐ │ │ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │ │ 标题 │ │ │ └────────┘ │ └────────┘ │ └────────┘ │ └────────┘ │ │ │ │ │ │ └──────────────────┴──────────────────┴──────────────────┴──────────────────────────────┘ CSS 代码： .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); } 适用场景： - 数据统计展示 - 产品特性列表 - 设计原则说明 - 快速功能预览 ⚠️ 注意：避免3+1布局（3个一行，1个换行） ❌ 错误： ┌─────┬─────┬─────┐ │ 1 │ 2 │ 3 │ └─────┴─────┴─────┘ ┌─────┐ │ 4 │ ← 单独换行很丑 └─────┘ ✅ 正确： ┌────┬────┬────┬────┐ │ 1 │ 2 │ 3 │ 4 │ └────┴────┴────┴────┘ ``` ### 4. 食品紧凑版Grid优化（减少列数，增大单元格） ``` 标准版 Grid-3: 食品紧凑版 Grid-3: ┌────┬────┬────┐ ┌──────────┬──────────┐ │ 1 │ 2 │ 3 │ │ 1 │ 2 │ └────┴────┴────┘ └──────────┴──────────┘ ┌──────────┐ │ 3 │ └──────────┘ grid-3 { grid-3 { columns: repeat(3, 1fr) columns: repeat(2, 1fr) ← 改为2列 } } 优势： - 图片更大，内容更突出 - 减少拥挤感 - 提升视觉层次 ``` --- ## 二、Flexbox布局模式 ### 1. Hero浮动卡片（强制并排） ``` ┌──────────────────────────────────────────────────────────────┐ │ Hero 内容区域 │ │ │ │ ┌──────────────┐ │ │ │ 主标题 │ │ │ │ 副标题 │ │ │ └──────────────┘ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 3600片 │ │ 99.7% │ │ ±0.02mm │ │ 300ms │ │ │ │ /小时 │ │ 检出率 │ │ 精度 │ │ 时间 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ ← flex-wrap: nowrap 强制并排，不换行 │ └──────────────────────────────────────────────────────────────┘ CSS 代码： .hero-floating-cards { display: flex; gap: var(--spacing-md); /* 紧凑间距 */ justify-content: center; flex-wrap: nowrap; /* 关键：强制并排 */ } .hero-card { padding: var(--spacing-sm) var(--spacing-md); /* 紧凑内边距 */ min-width: 100px; /* 小尺寸 */ border-radius: var(--radius-md); /* 适中圆角 */ } 关键技术点： ✅ flex-wrap: nowrap → 强制单行显示 ✅ gap 使用 md 而非 lg → 节省空间 ✅ min-width 100px → 保持紧凑 ❌ flex-wrap: wrap → 会导致换行 ``` ### 2. 卡片内部Flexbox Order布局 ``` 传统布局（标题在上）: Order重排布局（图片优先）: ┌─────────────────┐ ┌─────────────────┐ │ .card-header │ ← order: 1 │ .image │ ← order: 1 │ 标题区域 │ │ ┌───────────┐ │ ├─────────────────┤ │ │ 图片 │ │ │ .image │ ← order: 2 │ │ 16:9比例 │ │ │ ┌───────────┐ │ │ └───────────┘ │ │ │ 图片 │ │ ├─────────────────┤ │ └───────────┘ │ │ .card-header │ ← order: 2 ├─────────────────┤ │ 标题区域 │ │ .card-body │ ← order: 3 ├─────────────────┤ │ 内容区域 │ │ .card-body │ ← order: 3 └─────────────────┘ │ 内容区域 │ └─────────────────┘ CSS 代码： .card { display: flex; flex-direction: column; padding: 0; /* 移除内边距，让图片占满 */ } .image-container { order: 1; /* 图片最前 */ aspect-ratio: 16/9; margin-bottom: 0; /* 无间距 */ border-radius: 0; /* 卡片内无圆角 */ } .card-header { order: 2; /* 标题居中 */ padding: var(--spacing-xl); } .card-body { order: 3; /* 内容最后 */ padding: var(--spacing-xl); flex: 1; /* 占据剩余空间 */ } 优势： - 视觉冲击力强 - 图片优先展示 - 灵活调整顺序 - 响应式友好 ``` ### 3. 图片容器Aspect Ratio控制 ``` 16:9 宽屏比例（食品/能源页面常用）: ┌────────────────────────────────────┐ │ │ │ ┌──────────────┐ │ │ │ │ │ ← height: 自动计算 │ │ 16:9 │ │ (width / 16 * 9) │ │ │ │ │ └──────────────┘ │ │ │ └────────────────────────────────────┘ width: 100% 3:2 标准比例（产品展示）: ┌──────────────────────┐ │ │ │ ┌──────────┐ │ │ │ │ │ ← height: 自动计算 │ │ 3:2 │ │ (width / 3 * 2) │ │ │ │ │ └──────────┘ │ │ │ └──────────────────────┘ width: 100% 4:3 传统比例（时间线图片）: ┌─────────────────┐ │ │ │ ┌─────────┐ │ │ │ │ │ ← height: 自动计算 │ │ 4:3 │ │ (width / 4 * 3) │ │ │ │ │ └─────────┘ │ │ │ └─────────────────┘ width: 100% CSS 代码： /* 16:9 宽屏 - 紧凑现代 */ .image-container { aspect-ratio: 16/9; width: 100%; object-fit: cover; } /* 3:2 标准 - 产品展示 */ .product-image { aspect-ratio: 3/2; width: 100%; } /* 4:3 传统 - 时间线 */ .timeline-image { aspect-ratio: 4/3; flex: 0 0 300px; } 关键点： ✅ aspect-ratio 自动计算高度 ✅ object-fit: cover 裁剪适应 ✅ 无需手动设置 height ``` --- ## 三、图层叠加与定位模式 ### 1. 背景图片+渐变叠加 ``` ┌─────────────────────────────────────────┐ │ 卡片标题区域 (.card-header) │ ├─────────────────────────────────────────┤ │ ┌─────────────────────────────────────┐ │ ← position: relative │ │ 【Layer 3 - 最上层】 │ │ (容器定位上下文) │ │

标题文字

│ │ │ │ z-index: 1 │ │ │ │ color: white │ │ │ │ text-shadow: 0 2px 8px rgba(...) │ │ │ ├─────────────────────────────────────┤ │ │ │ 【Layer 2 - 中间层】 │ │ │ │ 渐变遮罩层
│ │ │ │ position: absolute │ │ │ │ inset: 0 │ │ │ │ background: linear-gradient( │ │ │ │ 135deg, │ │ │ │ rgba(13, 71, 161, 0.92) 0%, │ │ ← 半透明渐变 │ │ rgba(25, 118, 210, 0.88) 100% │ │ 保证文字可读性 │ │ ) │ │ │ │ z-index: 0 │ │ │ ├─────────────────────────────────────┤ │ │ │ 【Layer 1 - 底层】 │ │ │ │ 背景图片 │ │ │ │ background-image: │ │ │ │ url('unsplash.com/...') │ │ ← 实际图片 │ │ background-size: cover │ │ │ │ background-position: center │ │ │ └─────────────────────────────────────┘ │ └─────────────────────────────────────────┘ HTML 结构：

标题文字

z-index 层级说明： ━━━━━━━━━━━━━━━━━━━ 标题文字 (z: 1) ← 最上层，清晰可读 ━━━━━━━━━━━━━━━━━━━ 渐变遮罩 (z: 0) ← 中间层，半透明 ━━━━━━━━━━━━━━━━━━━ 背景图片 ← 底层，装饰作用 ━━━━━━━━━━━━━━━━━━━ ``` ### 2. Glassmorphism玻璃态效果 ``` ┌─────────────────────────────────────────────────────┐ │ 背景层（模糊背景图片或渐变） │ │ │ │ ┌─────────────────────────────────────┐ │ │ │ 【玻璃态卡片】 │ │ │ │ ┌─────────────────────────────────┐ │ │ │ │ │ 半透明背景 + 模糊效果 │ │ │ │ │ │ background: rgba(255,255,255,0.9)│ │ ← 90%透明度白色 │ │ │ backdrop-filter: blur(15px) │ │ ← 15px背景模糊 │ │ │ border: 2px solid rgba(...,0.2) │ │ ← 20%透明度边框 │ │ │ box-shadow: 0 8px 32px rgba(...) │ │ ← 柔和阴影 │ │ │ │ │ │ │ │ ┌────────────────────┐ │ │ │ │ │ │ 内容文字 │ │ │ ← 深色文字清晰可读 │ │ │ │ 清晰易读 │ │ │ │ │ │ └────────────────────┘ │ │ │ │ └─────────────────────────────────┘ │ │ └─────────────────────────────────────┘ │ │ └─────────────────────────────────────────────────────┘ CSS 代码： .card { background: var(--bg-card); /* rgba(255,255,255,0.9) */ backdrop-filter: blur(15px); /* 背景模糊 */ -webkit-backdrop-filter: blur(15px); /* Safari支持 */ border: 2px solid var(--border-light); /* rgba(..., 0.2) */ border-radius: var(--radius-2xl); /* 1.5rem */ box-shadow: var(--shadow-md); /* 柔和阴影 */ } .nav { background: var(--bg-semi-dark); /* rgba(255,255,255,0.95) */ backdrop-filter: blur(20px); /* 更强模糊 */ } 深色主题变体： body.dark-theme { --bg-card: rgba(18, 35, 24, 0.9); /* 深绿半透明 */ --bg-semi-dark: rgba(10, 26, 15, 0.95); /* 深邃绿半透明 */ } 效果特点： ✨ 透过效果 - 能看到背景元素 ✨ 模糊效果 - backdrop-filter: blur() ✨ 层次感强 - 阴影+边框+透明度 ✨ 现代时尚 - iOS/macOS风格 ``` --- ## 四、响应式布局转换 ### 1. Grid → 单列响应式 ``` 桌面端（>768px）: 移动端（≤768px）: ┌─────┬─────┬─────┐ ┌───────────┐ │ 1 │ 2 │ 3 │ │ 1 │ └─────┴─────┴─────┘ ├───────────┤ grid-3: repeat(3, 1fr) │ 2 │ ├───────────┤ │ 3 │ └───────────┘ grid-3: 1fr CSS 代码： @media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; /* 全部改为单列 */ } } ``` ### 2. Flexbox → 垂直堆叠 ``` 桌面端（>768px）: ┌──────────────────────────────────────────┐ │ .alternating-layout (flex-direction: row)│ ├─────────────────────┬────────────────────┤ │ 图片 (flex:1) │ 内容 (flex:1) │ │ ┌───────────────┐ │ 标题 │ │ │ │ │ 段落内容... │ │ │ 4:3比例 │ │ │ │ └───────────────┘ │ │ └─────────────────────┴────────────────────┘ 移动端（≤768px）: ┌──────────────────────────────────────────┐ │ .alternating-layout (flex-direction: col)│ ├──────────────────────────────────────────┤ │ ┌────────────────────────────────────┐ │ │ │ 图片 │ │ │ │ 4:3比例 │ │ │ └────────────────────────────────────┘ │ ├──────────────────────────────────────────┤ │ 标题 │ │ 段落内容... │ │ │ └──────────────────────────────────────────┘ CSS 代码： .alternating-layout { display: flex; gap: var(--spacing-2xl); align-items: center; } @media (max-width: 768px) { .alternating-layout { flex-direction: column; /* 改为垂直堆叠 */ } } ``` --- ## 五、间距系统对比 ### 标准间距 vs 紧凑间距 ``` ┌─────────────────────────────────────────────────────────────────┐ │ 间距对比示意图 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 标准版能源页面: │ │ ┌───────────────┐ ← --spacing-xl: 64px │ │ │ 卡片1 │ │ │ └───────────────┘ │ │ ↕ 96px (--spacing-2xl) │ │ ┌───────────────┐ │ │ │ 卡片2 │ │ │ └───────────────┘ │ │ │ │ 紧凑版食品页面: │ │ ┌───────────────┐ ← --spacing-xl: 40px (-37.5%) │ │ │ 卡片1 │ │ │ └───────────────┘ │ │ ↕ 48px (--spacing-2xl, -50%) │ │ ┌───────────────┐ │ │ │ 卡片2 │ │ │ └───────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ 数值对比表： ╔═══════════════╦═══════════════╦═══════════════╦═══════════╗ ║ 间距变量 ║ 标准版 ║ 紧凑版 ║ 减少比例 ║ ╠═══════════════╬═══════════════╬═══════════════╬═══════════╣ ║ --spacing-xs ║ 12px ║ 8px ║ -33% ║ ║ --spacing-sm ║ 20px ║ 12px ║ -40% ║ ║ --spacing-md ║ 32px ║ 20px ║ -37.5% ║ ║ --spacing-lg ║ 48px ║ 32px ║ -33% ║ ║ --spacing-xl ║ 64px ║ 40px ║ -37.5% ║ ║ --spacing-2xl ║ 96px ║ 48px ║ -50% ║ ║ --spacing-3xl ║ 128px ║ 64px ║ -50% ║ ╚═══════════════╩═══════════════╩═══════════════╩═══════════╝ 使用建议： ✅ 标准间距：适合内容较少、需要呼吸感的页面 ✅ 紧凑间距：适合内容丰富、需要展示更多信息的页面 ``` --- ## 六、排版层次结构 ### 文字层次金字塔 ``` ┌──────────────┐ │ Hero Title │ ← text-5xl: 64px │ 最大标题 │ font-bold: 700 └──────────────┘ 特殊场合使用 │ ┌──────────────┐ │ Section Title │ ← text-4xl: 48px │ 区块标题 │ font-bold: 700 └──────────────┘ 页面主要标题 │ ┌──────────────┐ │ Card Title │ ← text-2xl: 32px │ 卡片标题 │ font-semibold: 600 └──────────────┘ 卡片/组件标题 │ ┌────────────┴────────────┐ ┌──────────┐ ┌──────────┐ │ Subtitle │ │ Body │ ← text-lg: 22px │ 副标题 │ │ 正文 │ font-normal: 400 └──────────┘ └──────────┘ 主要内容 │ │ ┌──────────┐ ┌──────────┐ │ Caption │ │ Small │ ← text-sm: 16px │ 说明文字 │ │ 辅助文字 │ font-normal: 400 └──────────┘ └──────────┘ 次要信息 │ │ ┌──────────┐ ┌──────────┐ │ Label │ │ Meta │ ← text-xs: 14px │ 标签 │ │ 元信息 │ font-medium: 500 └──────────┘ └──────────┘ 最小文字 行高配置： ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 标题类 (h1-h3): line-height: 1.1-1.2 ← 紧凑，强调力度 正文类 (p): line-height: 1.6-1.8 ← 宽松，易读性强 说明类 (small): line-height: 1.4 ← 适中 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 字间距配置： ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 超大标题: letter-spacing: -0.02em ← 视觉紧凑 标签/按钮: letter-spacing: 0.1em ← 增强辨识度 正文: letter-spacing: 0 ← 标准间距 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` --- ## 七、实用布局组合示例 ### 1. 时间线布局 ``` ┌────────────────────────────────────────────────────────────┐ │ 时间线布局 │ ├────────────────────────────────────────────────────────────┤ │ ●───────────────────────────────────────────────────────┐ │ │ ┃ ┌──────────────────┐ ┌──────────────────┐ │ │ │ ┃ │ 时间线图片 │ │ 时间线内容 │ │ │ │ ┃ │ (300px fixed) │ │ (flex: 1) │ │ │ │ ┃ │ aspect: 4/3 │ │ │ │ │ │ ┃ │ │ │

标题 │ │ │ │ ┃ └──────────────────┘ │

描述内容... │ │ │ │ ┃ └──────────────────┘ │ │ │ ●───────────────────────────────────────────────────────┘ │ │ ┃ │ │ ●───────────────────────────────────────────────────────┐ │ │ ┃ ┌──────────────────┐ ┌──────────────────┐ │ │ │ ┃ │ 时间线图片 │ │ 时间线内容 │ │ │ │ ┃ └──────────────────┘ └──────────────────┘ │ │ │ ●───────────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────┘ ← 3px渐变线条 CSS 关键点： .timeline-layout::before { position: absolute; left: 0; width: 3px; background: linear-gradient( to bottom, var(--primary-green), var(--accent-gold) ); } .timeline-dot { position: absolute; left: calc(-1 * var(--spacing-2xl) - 8px); width: 20px; height: 20px; border-radius: 50%; } ``` ### 2. Featured Grid（高亮第一项） ``` ┌─────────────────────────────────────────────────────────┐ │ Featured Grid 布局 │ ├─────────────────────────────────────────────────────────┤ │ ┌─────────────────┐ ┌─────────┐ ┌─────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ Item2 │ │ Item3 │ │ │ │ Featured │ │ │ │ │ │ │ │ Item 1 │ │ 3:2 │ │ 3:2 │ │ │ │ (grid-row: │ └─────────┘ └─────────┘ │ │ │ 1/3) │ │ │ │ 3/4 比例 │ ┌─────────┐ ┌─────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ Item4 │ │ Item5 │ │ │ │ │ │ │ │ │ │ │ └─────────────────┘ └─────────┘ └─────────┘ │ │ ← span 2 rows │ └─────────────────────────────────────────────────────────┘ CSS 代码： .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); } .featured-item:first-child { grid-column: 1 / 2; /* 占第1列 */ grid-row: 1 / 3; /* 跨2行 */ } .featured-item:first-child .featured-image { aspect-ratio: 3/4; /* 竖向比例 */ } ``` --- ## 八、Hero区域布局模式 ⭐ ### 1. 标准Hero布局 ``` ┌────────────────────────────────────────────────────────────────┐ │ Hero Section │ │ (min-height: 60vh) │ │ │ │ ┌──────────────────────┐ │ │ │ 🔬 化工订单班 │ ← Badge徽章 │ │ └──────────────────────┘ │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ 半导体AI综合检测项目 │ ← 主标题 │ │ │ (text-5xl, font-bold) │ │ │ └──────────────────────────────────────┘ │ │ │ │ ┌──────────────────────────────────────┐ │ │ │ 300mm硅晶圆 + SiO₂薄膜智能质检 │ ← 副标题 │ │ │ (text-2xl, font-normal) │ │ │ └──────────────────────────────────────┘ │ │ │ │ ┌─────────────────────┐ │ │ │ 🤖 AI驱动全流程 │ ← 描述列表 │ │ │ 🔬 4大Agent协同 │ │ │ │ ✅ 95%合格率 │ │ │ └─────────────────────┘ │ │ │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .hero { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--primary), var(--secondary)); position: relative; overflow: hidden; } .hero-content { max-width: 800px; padding: var(--spacing-3xl) var(--spacing-xl); z-index: 1; } .hero-badge { display: inline-block; padding: var(--spacing-xs) var(--spacing-md); background: rgba(255, 255, 255, 0.2); border-radius: var(--radius-full); backdrop-filter: blur(10px); margin-bottom: var(--spacing-lg); } .hero-title { font-size: var(--text-5xl); font-weight: var(--font-bold); line-height: 1.1; margin-bottom: var(--spacing-md); } .hero-subtitle { font-size: var(--text-2xl); opacity: 0.9; margin-bottom: var(--spacing-xl); } .hero-description { font-size: var(--text-lg); line-height: 1.8; opacity: 0.8; } 关键点： ✅ 徽章采用玻璃态效果 ✅ 标题层次清晰（5xl → 2xl → lg） ✅ 背景使用渐变色 ✅ 居中对齐，最大宽度限制 ``` ### 2. Hero浮动卡片变体（数据展示型） ``` ┌────────────────────────────────────────────────────────────────┐ │ Hero Section │ │ │ │ ┌────────────────────────┐ │ │ │ 项目标题区域 │ │ │ └────────────────────────┘ │ │ │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │ ┌────────┐ │ │ ┌────────┐ │ │ ┌────────┐ │ │ ┌────────┐ │ │ │ │ │ 3600片 │ │ │ │ 99.7% │ │ │ │±0.02mm │ │ │ │ 300ms │ │ │ │ │ │ /小时 │ │ │ │ 检出率 │ │ │ │ 精度 │ │ │ │ 时间 │ │ │ │ │ └────────┘ │ │ └────────┘ │ │ └────────┘ │ │ └────────┘ │ │ │ │ Icon图标 │ │ Icon图标 │ │ Icon图标 │ │ Icon图标 │ │ │ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │ │ ← Flexbox并排，nowrap强制不换行 │ │ │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .hero-floating-cards { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: nowrap; /* 关键：强制并排 */ margin-top: var(--spacing-2xl); } .hero-card { min-width: 120px; padding: var(--spacing-md) var(--spacing-lg); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); text-align: center; transition: transform 0.3s ease; } .hero-card:hover { transform: translateY(-5px); } .hero-card-value { font-size: var(--text-3xl); font-weight: var(--font-bold); margin-bottom: var(--spacing-xs); } .hero-card-label { font-size: var(--text-sm); opacity: 0.8; } ``` --- ## 九、导航栏布局模式 ⭐ ### 1. 水平滚动导航（订单班标准） ``` ┌────────────────────────────────────────────────────────────────┐ │ 导航栏 (position: sticky) │ ├────────────────────────────────────────────────────────────────┤ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ >>> │ │ │ 📄项目 │ │ 🎯判定 │ │ 🔬检测 │ │ 📊结果 │ │ 💡总结 │ │ │ │ 概述 │ │ 标准 │ │ 流程 │ │ 分析 │ │ 建议 │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ │ │ │ ← overflow-x: auto 水平滚动 │ │ ← flex-wrap: nowrap 强制单行 │ └────────────────────────────────────────────────────────────────┘ 移动端滚动提示： ┌────────────────────────────────────────────────────────────────┐ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ▶▶▶ │ │ │ 概述 │ │ 标准 │ │ 流程 │ │ 结果 │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ ← 左右滑动查看更多 │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .nav { position: sticky; top: 0; z-index: 100; background: var(--bg-semi-dark); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */ } .nav-container { display: flex; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); flex-wrap: nowrap; /* 强制单行 */ min-width: min-content; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md); white-space: nowrap; /* 防止文字换行 */ cursor: pointer; transition: all 0.3s ease; } .nav-item.active { background: var(--primary); color: white; } .nav-item:hover { background: var(--bg-hover); } /* 隐藏滚动条但保留功能 */ .nav::-webkit-scrollbar { display: none; } .nav { -ms-overflow-style: none; scrollbar-width: none; } 关键点： ✅ sticky定位，滚动时固定顶部 ✅ overflow-x: auto 支持水平滚动 ✅ flex-wrap: nowrap 强制单行 ✅ backdrop-filter 玻璃态效果 ✅ 隐藏滚动条保持美观 ``` ### 2. 导航项结构详解 ``` 单个导航项内部结构： ┌──────────────────┐ │ .nav-item │ │ ┌────────────┐ │ │ │ Icon图标 │ │ ← │ └────────────┘ │ │ ┌────────────┐ │ │ │ 文字标签 │ │ ← │ └────────────┘ │ └──────────────────┘ flex-direction: column align-items: center 激活状态： ┌──────────────────┐ │ .nav-item.active │ ← 背景色变化 │ ┌────────────┐ │ │ │ 🔵 Icon │ │ ← 图标高亮 │ └────────────┘ │ │ ┌────────────┐ │ │ │ 项目概述 │ │ ← 文字加粗 │ └────────────┘ │ └──────────────────┘ background: var(--primary) color: white font-weight: 600 ``` --- ## 十、Agent头像区布局 ⭐ ### 1. Section Header布局（Agent信息） ``` ┌────────────────────────────────────────────────────────────────┐ │ Section Header │ ├────────────────────────────────────────────────────────────────┤ │ ┌─────────┐ ┌────────────────────────────────────────┐ │ │ │ │ │ .agent-info │ │ │ │ Agent │ │ ┌──────────────────────────────────┐ │ │ │ │ 头像 │ │ │ 👤 环境咨询师 │ │ │ │ │ (80px) │ │ │ (.agent-name) │ │ │ │ │ │ │ └──────────────────────────────────┘ │ │ │ │ 圆形 │ │ │ │ │ └─────────┘ │ ┌──────────────────────────────────┐ │ │ │ │ │ 项目背景与需求分析 │ │ │ │ │ │ (.section-title, text-4xl) │ │ │ │ │ └──────────────────────────────────┘ │ │ │ └────────────────────────────────────────┘ │ │ ← Flexbox横向排列，头像在左，信息在右 │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .section-header { display: flex; align-items: center; gap: var(--spacing-xl); margin-bottom: var(--spacing-2xl); padding-bottom: var(--spacing-xl); border-bottom: 2px solid var(--border); } .agent-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); flex-shrink: 0; /* 防止被压缩 */ } .agent-info { flex: 1; } .agent-name { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--primary); margin-bottom: var(--spacing-xs); } .section-title { font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: 1.2; margin: 0; } 关键点： ✅ Flexbox横向布局 ✅ 头像圆形，带边框和阴影 ✅ gap间距清晰分隔 ✅ Agent名称带图标 ✅ 底部边框分隔区域 ``` ### 2. 响应式Agent Header ``` 桌面端（>768px）: ┌──────────────────────────────────────────────┐ │ ┌─────┐ ┌──────────────────────────────┐ │ │ │头像 │ │ 👤 环境咨询师 │ │ │ │80px │ │ 项目背景与需求分析 │ │ │ └─────┘ └──────────────────────────────┘ │ └──────────────────────────────────────────────┘ flex-direction: row 移动端（≤768px）: ┌──────────────────────────────────────────────┐ │ ┌─────────┐ │ │ │ 头像 │ │ │ │ 60px │ │ │ └─────────┘ │ │ ┌─────────────────┐ │ │ │ 👤 环境咨询师 │ │ │ │ 项目背景 │ │ │ └─────────────────┘ │ └──────────────────────────────────────────────┘ flex-direction: column align-items: center text-align: center @media (max-width: 768px) { .section-header { flex-direction: column; align-items: center; text-align: center; } .agent-avatar { width: 60px; height: 60px; } .section-title { font-size: var(--text-3xl); } } ``` --- ## 十一、Stats统计数据布局 ⭐ ### 1. 标准Stats布局（4项并排） ``` ┌────────────────────────────────────────────────────────────────┐ │ 统计数据区 (.stats) │ ├────────────────────────────────────────────────────────────────┤ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ │ │ │ │ │ │ │ │ │ │ 项目总预算 │ │ 监测频次 │ │ 监测指标 │ │ 样品总数 │ │ │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ │ │ label) │ │ label) │ │ label) │ │ label) │ │ │ │ │ │ │ │ │ │ │ │ │ │ 45万元 │ │ 12次/年 │ │ 26项 │ │ 144个/年 │ │ │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ (.stat- │ │ │ │ value) │ │ value) │ │ value) │ │ value) │ │ │ │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ← grid-template-columns: repeat(4, 1fr) │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); margin-top: var(--spacing-2xl); padding: var(--spacing-xl); background: var(--bg-semi-dark); border-radius: var(--radius-lg); } .stat-item { text-align: center; padding: var(--spacing-lg); background: var(--bg-card); border-radius: var(--radius-md); border: 1px solid var(--border); transition: all 0.3s ease; } .stat-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } .stat-label { font-size: var(--text-sm); color: var(--text-gray); margin-bottom: var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.05em; } .stat-value { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--primary); line-height: 1.2; } 关键点： ✅ Grid 4列等宽布局 ✅ 标签小字，数值大字 ✅ 悬停上移效果 ✅ 卡片样式分隔 ``` ### 2. 响应式Stats布局 ``` 桌面端（>1024px）: ┌─────┬─────┬─────┬─────┐ │ 1 │ 2 │ 3 │ 4 │ └─────┴─────┴─────┴─────┘ grid-template-columns: repeat(4, 1fr) 平板端（768px-1024px）: ┌──────────┬──────────┐ │ 1 │ 2 │ ├──────────┼──────────┤ │ 3 │ 4 │ └──────────┴──────────┘ grid-template-columns: repeat(2, 1fr) 移动端（<768px）: ┌──────────────┐ │ 1 │ ├──────────────┤ │ 2 │ ├──────────────┤ │ 3 │ ├──────────────┤ │ 4 │ └──────────────┘ grid-template-columns: 1fr CSS 代码： @media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .stats { grid-template-columns: 1fr; } .stat-value { font-size: var(--text-2xl); } } ``` ### 3. 动画数字Stats（带计数效果） ``` 数字滚动动画示意： 0 → 15 → 30 → 45 → 45万元 ┗━━━━━━━━━━━━━━━━━━━━━━━┛ 1.5秒动画 JavaScript实现：

0
const statValues = document.querySelectorAll('.stat-value'); statValues.forEach(stat => { const target = parseInt(stat.dataset.target); let current = 0; const increment = target / 100; const timer = setInterval(() => { current += increment; if (current >= target) { stat.textContent = target; clearInterval(timer); } else { stat.textContent = Math.floor(current); } }, 15); }); ``` --- ## 十二、Footer总结区布局 ⭐ ### 1. 三栏总结布局（项目成果） ``` ┌────────────────────────────────────────────────────────────────┐ │ Footer总结区 │ │ (background: var(--bg-semi-dark)) │ ├────────────────────────────────────────────────────────────────┤ │ 🏆 项目成果总结 │ │ (.section-title, text-center) │ │ │ ├───────────────────┬───────────────────┬───────────────────────┤ │ │ │ │ │ 📋 交付物清单 │ 🎯 项目目标 │ ⚙️ 技术保障 │ │ (.card) │ (.card) │ (.card) │ │ │ │ │ │ ✅ 采样方案报告 │ ✅ 26项指标 │ ✅ ICP-MS设备 │ │ ✅ 季度监测报告 │ ✅ Ⅲ类水质 │ ✅ GC-MS分析仪 │ │ ✅ 年度总结报告 │ ✅ 12次/年 │ ✅ BOD培养箱 │ │ ✅ 监测数据库 │ ✅ 数据准确度 │ ✅ 自动采样器 │ │ ✅ 现场照片资料 │ ✅ 质控样本 │ ✅ GPS定位系统 │ │ ✅ 质控记录文件 │ ✅ 报告及时 │ ✅ 数据传输系统 │ │ ✅ 趋势分析图表 │ ✅ 污染预警 │ ✅ LIMS实验室系统 │ │ ✅ 改善建议方案 │ ✅ CMA认证 │ ✅ 三级质控体系 │ │ │ │ │ └───────────────────┴───────────────────┴───────────────────────┘ │ │ │ © 2024 环保订单班 | AI驱动的环境监测方案 │ │ (.text-center, color: gray) │ └────────────────────────────────────────────────────────────────┘ CSS 代码： .footer-summary { background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0; margin-top: var(--spacing-3xl); } .footer-summary .section-title { text-align: center; margin-bottom: var(--spacing-2xl); } .footer-summary .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); } .footer-summary .card { background: var(--bg-card); padding: var(--spacing-xl); border-radius: var(--radius-lg); } .footer-summary .card-header { order: 1; margin-bottom: var(--spacing-md); } .footer-summary .card-title { font-size: var(--text-xl); font-weight: var(--font-bold); } .footer-summary .feature-list { list-style: none; padding: 0; } .footer-summary .feature-list li { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) 0; font-size: var(--text-sm); } .footer-summary .text-center { text-align: center; margin-top: var(--spacing-2xl); color: var(--text-gray); font-size: var(--text-sm); } 关键点： ✅ Grid 3列布局 ✅ 深色背景区分 ✅ 卡片样式分隔 ✅ Icon + 文字列表 ✅ 版权信息居中 ``` ### 2. 响应式Footer布局 ``` 桌面端（>1024px）: ┌──────────┬──────────┬──────────┐ │ 卡片1 │ 卡片2 │ 卡片3 │ └──────────┴──────────┴──────────┘ grid-template-columns: repeat(3, 1fr) 平板端（768px-1024px）: ┌──────────┬──────────┐ │ 卡片1 │ 卡片2 │ └──────────┴──────────┘ ┌──────────────────────┐ │ 卡片3 │ └──────────────────────┘ grid-template-columns: repeat(2, 1fr) 移动端（<768px）: ┌──────────────────────┐ │ 卡片1 │ ├──────────────────────┤ │ 卡片2 │ ├──────────────────────┤ │ 卡片3 │ └──────────────────────┘ grid-template-columns: 1fr @media (max-width: 1024px) { .footer-summary .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .footer-summary .grid-3 { grid-template-columns: 1fr; } } ``` --- ## 十三、关键CSS属性速查表 ``` ╔═══════════════════════════════════════════════════════════════╗ ║ 布局相关属性 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ display: grid │ 启用Grid布局 ║ ║ display: flex │ 启用Flexbox布局 ║ ║ grid-template-columns │ 定义Grid列数和宽度 ║ ║ gap │ Grid/Flex项目间距 ║ ║ flex-direction │ Flex主轴方向 ║ ║ flex-wrap │ Flex换行控制 ║ ║ order │ Flex/Grid项目顺序 ║ ║ align-items │ 交叉轴对齐 ║ ║ justify-content │ 主轴对齐 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ 尺寸相关属性 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ aspect-ratio │ 宽高比例 ║ ║ min-width / max-width │ 最小/最大宽度 ║ ║ flex: 1 │ 占据剩余空间 ║ ║ flex: 0 0 300px │ 固定尺寸 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ 定位相关属性 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ position: relative │ 相对定位（定位上下文） ║ ║ position: absolute │ 绝对定位（脱离文档流） ║ ║ position: sticky │ 粘性定位（导航栏常用） ║ ║ inset: 0 │ top/right/bottom/left全为0 ║ ║ z-index │ 层级控制 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ 视觉效果属性 ║ ╠═══════════════════════════════════════════════════════════════╣ ║ backdrop-filter: blur() │ 背景模糊（玻璃态） ║ ║ background: linear-gradient│ 渐变背景 ║ ║ box-shadow │ 阴影效果 ║ ║ border-radius │ 圆角 ║ ║ object-fit: cover │ 图片裁剪适应 ║ ║ overflow-x: auto │ 水平滚动 ║ ║ white-space: nowrap │ 文字不换行 ║ ╚═══════════════════════════════════════════════════════════════╝ ``` --- ## 十四、常见问题解决方案 ### 问题1: Grid布局出现3+1排列 ``` ❌ 问题： ┌─────┬─────┬─────┐ │ 1 │ 2 │ 3 │ └─────┴─────┴─────┘ ┌─────┐ │ 4 │ ← 丑陋的换行 └─────┘ ✅ 解决：确保列数匹配项目数 grid-template-columns: repeat(4, 1fr); /* 4项目 = 4列 */ 或者：使用auto-fit/auto-fill grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); ``` ### 问题2: 图片被压缩变形 ``` ❌ 问题：img设置了width和height，导致变形 ✅ 解决方案： .image-container { aspect-ratio: 16/9; overflow: hidden; } .image-container img { width: 100%; height: 100%; object-fit: cover; ← 关键：裁剪而不是拉伸 } ``` ### 问题3: Flexbox项目换行不理想 ``` ❌ 问题：flex-wrap: wrap导致意外换行 ✅ 解决方案： /* 强制不换行 */ .hero-floating-cards { flex-wrap: nowrap; } /* 或使用Grid替代 */ .hero-floating-cards { display: grid; grid-template-columns: repeat(4, 1fr); } ``` ### 问题4: 背景图片看不清文字 ``` ❌ 问题：白色文字在浅色背景上不可读 ✅ 解决方案：添加渐变遮罩

文字内容

``` ### 问题5: 导航栏滚动不平滑 ``` ❌ 问题：iOS设备上滚动卡顿 ✅ 解决方案： .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; ← iOS平滑滚动 } ``` ### 问题6: Stats数字不对齐 ``` ❌ 问题：数字长度不一致导致布局混乱 ✅ 解决方案： .stat-value { font-variant-numeric: tabular-nums; ← 等宽数字 min-height: 3rem; ← 固定最小高度 } ``` --- ## 十五、最佳实践总结 ``` ┌──────────────────────────────────────────────────────────┐ │ 布局设计原则 │ ├──────────────────────────────────────────────────────────┤ │ │ │ 1. 移动优先设计（Mobile First） │ │ → 先设计小屏幕布局，再扩展到大屏幕 │ │ │ │ 2. 语义化HTML结构 │ │ → section, article, header, nav 而非通用div │ │ │ │ 3. 使用CSS变量统一设计 │ │ → --spacing-*, --text-*, --radius-* │ │ │ │ 4. 图片优先展示 │ │ → 使用flexbox order将图片放在最前 │ │ │ │ 5. 保持一致的间距比例 │ │ → 8px基准，倍数递增（8, 12, 20, 32, 40...） │ │ │ │ 6. 避免固定高度 │ │ → 使用aspect-ratio而非固定height │ │ │ │ 7. Grid列数要合理 │ │ → 4项目用4列，避免3+1布局 │ │ │ │ 8. 背景图要加遮罩 │ │ → 使用linear-gradient保证文字可读性 │ │ │ │ 9. 卡片内容要紧凑 │ │ → 图片占满宽度，padding为0 │ │ │ │ 10. 响应式断点统一 │ │ → 768px (移动/平板), 1024px (平板/桌面) │ │ │ │ 11. 导航栏使用sticky定位 │ │ → position: sticky; top: 0; 滚动时固定 │ │ │ │ 12. Agent头像突出显示 │ │ → 圆形头像 + 边框 + 阴影 │ │ │ │ 13. Stats数据醒目展示 │ │ → 大数值 + 小标签 + 卡片分隔 │ │ │ │ 14. Footer总结清晰明了 │ │ → 三栏布局 + Icon列表 + 深色背景 │ │ │ │ 15. 玻璃态效果增强质感 │ │ → backdrop-filter: blur() + 半透明 │ │ │ └──────────────────────────────────────────────────────────┘ ``` --- ## 快速参考命令 ```bash # Grid布局速查 display: grid; grid-template-columns: repeat(2, 1fr); # 2列等宽 grid-template-columns: repeat(3, 1fr); # 3列等宽 grid-template-columns: repeat(4, 1fr); # 4列等宽 gap: var(--spacing-2xl); # 48px间距 # Flexbox布局速查 display: flex; flex-direction: column; # 垂直排列 flex-wrap: nowrap; # 不换行 order: 1 / 2 / 3; # 排列顺序 flex: 1; # 占据剩余空间 # 图片比例速查 aspect-ratio: 16/9; # 宽屏 aspect-ratio: 3/2; # 标准 aspect-ratio: 4/3; # 传统 aspect-ratio: 1/1; # 正方形 # 玻璃态效果 background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); border: 2px solid rgba(76, 175, 80, 0.2); # 图层叠加 position: relative; # 容器 position: absolute; inset: 0; z-index: 0; # 遮罩层 position: relative; z-index: 1; # 内容层 # Sticky导航 position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px); # 圆形头像 width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--primary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); # Stats布局 display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-xl); text-align: center; # Footer布局 background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0; grid-template-columns: repeat(3, 1fr); ``` --- ## 订单班页面标准结构 ``` 完整页面结构： ┌────────────────────────────────────────────────────────────┐ │ 1. Theme Toggle Button (主题切换) │ ├────────────────────────────────────────────────────────────┤ │ 2. Hero Section (英雄区) │ │ - Badge徽章 │ │ - 主标题 + 副标题 │ │ - 描述文字 │ │ - 浮动数据卡片（可选） │ ├────────────────────────────────────────────────────────────┤ │ 3. Navigation Bar (导航栏 - sticky) │ │ - 水平滚动 │ │ - Icon + 文字 │ ├────────────────────────────────────────────────────────────┤ │ 4. Section 1 (Agent 1) │ │ - Section Header (Agent头像 + 信息) │ │ - Expert Intro (专家介绍) │ │ - Content (Grid布局内容) │ │ - Stats (统计数据) │ ├────────────────────────────────────────────────────────────┤ │ 5. Section 2 (Agent 2) │ │ - 同上结构 │ ├────────────────────────────────────────────────────────────┤ │ 6. Section 3 (Agent 3) │ │ - 同上结构 │ ├────────────────────────────────────────────────────────────┤ │ 7. Section 4 (Agent 4) │ │ - 同上结构 │ ├────────────────────────────────────────────────────────────┤ │ 8. Footer Summary (项目成果总结) │ │ - 标题居中 │ │ - Grid-3布局 │ │ - 深色背景 │ │ - 版权信息 │ └────────────────────────────────────────────────────────────┘ 关键CSS变量： --spacing-xs: 8px --spacing-sm: 12px --spacing-md: 20px --spacing-lg: 32px --spacing-xl: 40px --spacing-2xl: 48px --spacing-3xl: 64px --text-xs: 14px --text-sm: 16px --text-lg: 22px --text-xl: 28px --text-2xl: 32px --text-3xl: 40px --text-4xl: 48px --text-5xl: 64px --radius-sm: 4px --radius-md: 8px --radius-lg: 12px --radius-xl: 16px --radius-2xl: 24px --radius-full: 9999px ``` --- **文档版本**: v2.0 (完整增强版) **创建日期**: 2025年 **最后更新**: 2025年10月 **适用项目**: web_frontend/web_result/order-classes/ **相关文档**: food-compact-design-spec (Serena记忆) **新增内容总结**: - ✅ Hero区域布局模式（徽章、标题、浮动卡片） - ✅ 导航栏布局模式（水平滚动、sticky定位） - ✅ Agent头像区布局（圆形头像、信息区） - ✅ Stats统计数据布局（4列Grid、响应式） - ✅ Footer总结区布局（三栏、深色背景） - ✅ 订单班页面标准结构（完整模板） - ✅ 更多实用CSS属性和技巧