30 lines
2.3 KiB
HTML
30 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>模块网格与索引 · 排版示例</title>
|
|
<style>
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:#e4e6e1;color:#243230}
|
|
.pl-frame{width:min(100%,1080px);margin-inline:auto;container-type:inline-size}
|
|
.pl-sheet{--paper:#f5f3ec;--ink:#243230;--muted:#9aa6a5;--deep:#5d706e;position:relative;isolation:isolate;width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--paper);color:var(--ink);font-size:1cqw;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif}
|
|
.pl-sheet .panel{position:absolute;background:var(--muted)}
|
|
.pl-sheet .title{position:absolute;margin:0;font-weight:500;line-height:1.12;max-width:86%;overflow-wrap:anywhere}
|
|
.pl-sheet .copy{position:absolute;margin:0;font-size:2.22em;line-height:1.65;white-space:pre-line}
|
|
.pl-sheet .edition{position:absolute;left:7%;right:7%;bottom:2.5%;display:flex;justify-content:space-between;border-top:.1em solid currentColor;padding-top:.7em;font-size:1.6em;letter-spacing:.08em}
|
|
.pl-sheet.monumental-type .edition,.pl-sheet.split-contrast .edition{color:var(--paper)}
|
|
@media print{@page{size:1080px 1440px;margin:0}body{background:transparent}.pl-frame{width:1080px;max-width:none}.pl-sheet{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
|
|
.pl-sheet.modular-grid .grid{position:absolute;left:7%;right:7%;top:28%;bottom:13%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2em}.pl-sheet.modular-grid .cell{padding:2em;background:var(--muted);font-size:2.6em}.pl-sheet.modular-grid .cell:first-child{background:var(--deep);color:var(--paper)}.pl-sheet.modular-grid .title{left:7%;top:10%;font-size:6.5em}.pl-sheet.modular-grid .copy{left:7%;bottom:5%;width:86%}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="pl-frame"><article class="pl-sheet modular-grid" aria-label="模块网格与索引排版示例">
|
|
<h1 class="title">视觉档案</h1>
|
|
<div class="grid"><div class="cell">01 / 观察</div><div class="cell">02 / 结构</div><div class="cell">03 / 材料</div><div class="cell">04 / 字体</div><div class="cell">05 / 色彩</div><div class="cell">06 / 留白</div></div>
|
|
<p class="copy">INDEX / SIX DESIGN STUDIES</p>
|
|
<div class="edition"><span>FORM / STUDIES</span><span>2026 · 06</span></div>
|
|
</article></div>
|
|
</body>
|
|
</html>
|