---
title: 版式 Layout
url: https://ui.zhaozimin.com/foundations/layout/
markdown: https://ui.zhaozimin.com/foundations/layout.md
group: 基础
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/SPACING.md  # https://ui.zhaozimin.com/src/system/styles/v4/SPACING.md
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 版式 Layout

> 主内容区最宽 1080、左右内距 48；节标题共用一个骨架；卡片共用一套语法。板块之间的「联系感」来自这三件事。

## 容器

| 区域 | 尺寸 |
|---|---|
| 主内容区 | `max-width: 1080px` + 左右内距 `48px` |
| 窄文档流 | `max-width: 820px` |
| 侧栏 | `266px`（edu 历史值，牵连布局公式，暂不改） |
| 面包屑顶栏 | 钉顶，高 48，底部 .07 细线 |
| 收起钮 | 恒位：左 14、上 12，28×28 幽灵图标键；展开/收起两态同坐标 |

## 节标题

长页一律用同一个骨架：mono 编号 + 标题 + 右侧注记，底部一条 .09 细线。不另起炉灶。

### 样张 · SectionHead 骨架

React：

```jsx
export function SectionHead() {
  return (
    <div style={{ width: '100%', display: 'flex', alignItems: 'baseline', gap: 12, paddingBottom: 12, borderBottom: '1px solid rgba(0,0,0,.09)' }}>
      <span style={{ fontFamily: 'var(--zzm-mono)', fontSize: 12, letterSpacing: '1px', color: '#A2A29C' }}>02</span>
      <h2 style={{ margin: 0, fontSize: 24, lineHeight: '32px', fontWeight: 700 }}>课程总览</h2>
      <span style={{ marginLeft: 'auto', fontFamily: 'var(--zzm-mono)', fontSize: 11, color: '#A2A29C' }}>6 系列 · 67 节</span>
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div
  style="
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  "
>
  <span style="font-family: var(--zzm-mono); font-size: 12px; letter-spacing: 1px; color: #a2a29c">
    02
  </span>
  <h2 style="margin: 0; font-size: 24px; line-height: 32px; font-weight: 700">课程总览</h2>
  <span style="margin-left: auto; font-family: var(--zzm-mono); font-size: 11px; color: #a2a29c">
    6 系列 · 67 节
  </span>
</div>
```

## 卡片语法

所有内容卡共用：白卡 + 1px 细线 + 圆角 16 + 内距 16–24 + `.zzm-card` 浮起光影。可点的卡用 `.zzm-cardlink`（见[卡片与卡链](/components/card)）。

### 样张 · 标准内容卡

React：

```jsx
export function CardGrammar() {
  return (
    <div className="zzm-card" style={{ width: 320, padding: 24, display: 'grid', gap: 8 }}>
      <div style={{ fontFamily: 'var(--zzm-mono)', fontSize: 10, letterSpacing: '1.5px', color: '#A2A29C' }}>学习进度</div>
      <div style={{ fontSize: 16, lineHeight: '24px', fontWeight: 650 }}>本周完成 6 节</div>
      <div style={{ fontSize: 12.5, lineHeight: '20px', color: '#72726E' }}>白卡 · 1px 细线 · 圆角 16 · 内距 16–24 · 浮起光影。</div>
    </div>
  )
}
```

HTML（构建时由上面的 React 渲染得到，可直接粘贴）：

```html
<div class="zzm-card" style="width: 320px; padding: 24px; display: grid; gap: 8px">
  <div style="font-family: var(--zzm-mono); font-size: 10px; letter-spacing: 1.5px; color: #a2a29c">
    学习进度
  </div>
  <div style="font-size: 16px; line-height: 24px; font-weight: 650">本周完成 6 节</div>
  <div style="font-size: 12.5px; line-height: 20px; color: #72726e">
    白卡 · 1px 细线 · 圆角 16 · 内距 16–24 · 浮起光影。
  </div>
</div>
```

## 节奏

落地页、长页的节与节之间统一 60px 顶距；节内区块间 24 / 32。分隔靠 1px 细线与留白分层，不靠色块。

## 铁律

- ✓ 要：内容区最宽 1080，节与节共用这一个宽度
- ✗ 不要：每个板块自己定宽度
- ✓ 要：节标题用 SectionHead 骨架
- ✗ 不要：用色带或粗线分隔板块

## 本页用到的 CSS

按样张里出现的类名，从源文件原样裁出（完整版见 zzm.css）：

```css
/* tokens.css · 用到的令牌 */
:root {
  --zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* base.css */

.zzm-v4 .zzm-inklink { color: inherit; transition: color .16s ease; }

.zzm-v4 .zzm-inklink:hover { color: #161616; }

.zzm-v4 .zzm-inklink:focus-visible { outline: none; border-radius: 4px; box-shadow: 0 0 0 3px rgba(166, 64, 47, .2); }

/* controls.css */

.zzm-v4 .zzm-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .04),
    0 6px 18px rgba(0, 0, 0, .05),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}
```

---

上一页：[动效](https://ui.zhaozimin.com/foundations/motion.md) · 下一页：[图标](https://ui.zhaozimin.com/foundations/icons.md) · 全站目录：https://ui.zhaozimin.com/llms.txt