LAYOUT
杂志式排版Editorial Layout
粗黑短横线 + 超大标题 + 双栏正文 + 斜体引文,像一本印刷杂志的内页。
效果预览
慢下来,才是快
好的工具不催促你。它替你记住那些容易溜走的东西——一个想法、一个待办、一个没有答案的问题。
"我们不是在制造效率,而是在归还注意力。"
适合用在哪
博客文章页、品牌故事、深度报道、设计感强的内容站。
容易踩的坑
- 中文正文用 text-align:justify 会出现大段字距拉伸,需配合 text-justify 或改左对齐。
- 双栏正文在长文中迫使读者上下来回滚动,屏幕高度不足时应改为单栏。
- 移动端仍保留 column-count:2,每栏不足 12 个字,阅读极其破碎。
设计提示词 · Prompt
杂志式排版(Editorial Layout):正文区最大宽度 680-760px 居中。顶部一条 40-60px 宽、3px 粗的纯黑短横线,下面 44-64px 超粗标题(字距 -0.03em)。正文用 column-count:2 双栏(栏距 32px)+ text-align:justify 两端对齐 + 首段可加首字下沉。引文块只靠一条 2px 品牌色左竖线 + 斜体 + 左缩进表达,不加背景色。段间距 1.2em,行高 1.7-1.8。整体只用黑、白、灰 + 一个强调色。
Editorial Layout: body area max width 680-760px, centered. At the top, a solid black short rule 40-60px wide and 3px thick, followed by a 44-64px extra-bold headline (letter-spacing -0.03em). Body text uses column-count:2 for two columns (32px column gap) + text-align:justify + an optional drop cap on the first paragraph. Pull quotes are expressed only with a 2px brand-color left rule + italics + left indent, no background color. Paragraph spacing 1.2em, line-height 1.7-1.8. Use only black, white, gray + one accent color throughout.
常见搭配
同一页面里经常和「杂志式排版」一起出现的模式,可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-editorial"> <div class="d-editorial__rule"></div> <h4>慢下来,才是快</h4> <div class="d-editorial__cols">好的工具不催促你。<b>它替你记住</b>那些容易溜走的东西——一个想法、一个待办、一个没有答案的问题。</div> <div class="d-editorial__quote">"我们不是在制造效率,而是在归还注意力。"</div> </div>