Menu
web@custommugfactory.com +8618907337671
Language

标题层级

H2 — 二级标题(30px / text-3xl / font-bold)

标题下方紧跟的段落文字,用来验证标题与段落之间的间距是否合理。中文字体渲染效果也需要确认。

H3 — 三级标题(24px / text-2xl / font-bold)

三级标题常用于文章内大段落的分节,配合下方正文形成清晰的阅读节奏。

H4 — 四级标题(18px / text-lg / font-semibold)

四级标题适用于子章节,与正文形成适度对比但不至于太过突兀。

H5 — 五级标题(16px / text-base / font-semibold)

五级标题与正文同字号,仅靠加粗区分层级。

H6 — 六级标题(14px / text-sm / font-semibold / gray-700)

六级标题比正文还小一号,颜色略浅,适合做注释性小标题。

段落与内联元素

这是一段普通正文。字号为 16px(text-base),行高为 leading-relaxed(1.625),段落之间下边距统一为 20px(mb-5)。正文中可能包含加粗文字斜体文字删除线以及超链接。超链接默认为主题色 primary 并带有下划线,hover 时变为 primary-dark。

第二段文字紧随其后,用来验证段落间距。代码内联展示:get_template_part() 使用灰底圆角背景,颜色为 primary-dark。

键盘输入 Ctrl + C 在某些场景下也会出现,但目前未专门设定样式。

无序列表

  • 无序列表项第一行 — 多行情况下的换行效果:这段文字故意写长一点,用来测试列表项内容换行时行高和对齐是否保持一致。
  • 列表项之间间距为 space-y-1.5(6px)
  • 第三项 — 带链接的列表项

有序列表

  1. 有序列表第一项
  2. 第二项 — 编号自动递增
  3. 第三项 — 列表整体下边距与段落一致 mb-5

引用块

这是一段引用文字。左边框为 primary 色,背景为 primary/5 浅色底,文字为 italic 斜体。整块下边距与段落统一为 mb-5。

引用块上方的段落,验证上下间距。

代码块

下方为 pre 代码块:

// functions.php
add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('xs-style', get_template_directory_uri() . '/assets/dist/main.css');
    wp_enqueue_script('xs-main', get_template_directory_uri() . '/assets/dist/main.js');
});

代码块上方的段落和下方的段落,验证上下间距。

正文表格(原生 HTML)

产品名称规格价格库存
产品 A100×200mm¥599有货
产品 B150×300mm¥899有货
产品 C200×400mm¥1299缺货
产品 D250×500mm¥1699有货

原生 HTML 表格,表头为 primary 白字,隔行浅灰底,hover 为 primary/5。

图片 & 图注

示例图片
图注文字(figcaption)— text-sm text-gray-400 居中,上方 mt-2

图片自动 max-width:100% 防溢出,下方图注居中灰色。

图片对齐

左对齐
左对齐图片

左对齐(alignleft)图片会浮动到左侧,文字环绕。这段文字故意写长一些,用来测试文字环绕浮动图片时的排版效果。当文字足够多时,会自然地在图片右侧和下方流动。

第二段文字继续环绕,验证连续段落与浮动图片的交互是否正常。

右对齐
右对齐图片

右对齐(alignright)图片浮动到右侧。这段文字同样故意写长,用来测试右侧浮动图片与正文文字的环绕效果是否美观自然。

分隔线

分隔线上方段落。


分隔线下方段落 — 分隔线上下间距为 my-8(32px),颜色 gray-200。

嵌入媒体

iframe 嵌入(模拟 YouTube):

iframe 自动 16:9 宽高比,max-width:100%。

Gutenberg 块

Pullquote(引用块)

这是一个 Gutenberg Pullquote 块,左边框 primary 色 + 浅底背景,字号 text-lg。

— 引用来源

Verse(诗句)

春眠不觉晓,
处处闻啼鸟。
夜来风雨声,
花落知多少。

Cover(封面)

封面标题

这是封面块的描述文字,mb-5 下边距与段落统一。

Media & Text(图文混排)

图文混排标题

左侧图片右侧文字,gap-6 间距,mb-5 下边距。

Buttons(按钮组)

Audio(音频)

File(文件下载)

Gallery(图册)

Gutenberg 表格块(wp-block-table)

列 A列 B列 C
数据 1数据 2数据 3
数据 4数据 5数据 6
数据 7数据 8数据 9
表格图注(figcaption)— text-sm text-gray-400 居中 mt-3

视频块(wp-block-video)

视频图注 — mb-5 下边距
+8618907337671

Chat on WhatsApp

web@custommugfactory.com

Send Email