diff --git a/docs/quickreference.md b/docs/quickreference.md index c66e3a9..fbf89cb 100644 --- a/docs/quickreference.md +++ b/docs/quickreference.md @@ -15,6 +15,7 @@ Quick Reference 备忘清单 ```shell git clone git@github.com:jaywcjlove/reference.git ``` + #### 安装依赖编译生成 HTML 页面 @@ -200,7 +201,7 @@ H2 部分 `row-span-4` | `4` 行占位 -### 卡片 1 列布局 +### 卡片合并行布局 ```shell ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ @@ -211,7 +212,7 @@ H2 部分 ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ``` -Markdown 源码 +上面布局效果 Markdown 源码： ```markdown ### H3 Title 1 @@ -223,8 +224,151 @@ Markdown 源码 ### Title 4 ``` -默认 3 列布局，第一标题添加 `col-span-3` 占位类 +第一标题添加 `col-span-3` 占位类 +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ +┆ ┆ ╰┈┈┈╯ ╰┈┈┈╯ +┆ ┆ ╭┈┈┈╮ ╭┈┈┈╮ +┆ ┆ ┆ 4 ┆ ┆ 5 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 + +### Title 2 +### Title 3 +### Title 4 +### Title 5 +``` + +在 `Title 1` 标题添加 `row-span-2` 占位类 + +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ +╰┈┈┈╯ ┆ ┆ ╰┈┈┈╯ +╭┈┈┈╮ ┆ ┆ ╭┈┈┈╮ +┆ 4 ┆ ┆ ┆ ┆ 5 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 +### Title 2 + +### Title 3 +### Title 4 +### Title 5 +``` + +在 `Title 2` 标题添加 `row-span-2` 占位类 + +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ┆ ┆ +╭┈┈┈╮ ╭┈┈┈╮ ┆ ┆ +┆ 4 ┆ ┆ 5 ┆ ┆ ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 +### Title 2 +### Title 3 + +### Title 4 +### Title 5 +``` + +在 `Title 3` 标题添加 `row-span-2` 占位类 + +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ +┆ 4 ┆ ┆ 5 ┆ +╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 +### Title 2 +### Title 3 +### Title 4 +### Title 5 + +``` + +在 `Title 5` 标题添加 `col-span-2` 占位类 + +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ +╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 +### Title 2 + +### Title 3 +### Title 4 +### Title 5 +``` + +在 `Title 5` 标题添加 `col-span-2` 占位类 + +### 卡片列合并布局 + +```shell +╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ +┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ +╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ +╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮ +┆ 4 ┆ ┆ 5 ┆ +╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯ +``` + +上面布局效果 Markdown 源码： + +```markdown +### Title 1 +### Title 2 +### Title 3 +### Title 4 + +### Title 5 +``` + +在 `Title 5` 标题添加 `col-span-2` 占位类 表格 --- @@ -311,6 +455,7 @@ H2 部分 - 5列效果展示 ### One + ``` ... @@ -406,4 +551,13 @@ H3 部分 - 占位效果展示 每个盒子(卡片)都是一个 `H3` 部分。 盒子将包含 `H3` 自身内的所有东西。 -这是一个包含段落的基本部分。 \ No newline at end of file +这是一个包含段落的基本部分。 + +### H3 部分背景颜色 + + +```markdown +注释配置： +`` +``` + \ No newline at end of file