32 lines
2.0 KiB
HTML
32 lines
2.0 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.offset-panels .panel-a{left:18%;top:16%;width:68%;height:37%}.pl-sheet.offset-panels .panel-b{left:37%;top:57%;width:49%;height:31%;background:var(--deep)}.pl-sheet.offset-panels .title{left:7%;top:6%;font-size:6em}.pl-sheet.offset-panels .copy{left:7%;top:66%;width:25%}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="pl-frame"><article class="pl-sheet offset-panels" aria-label="错位双矩形排版示例">
|
|
<div class="panel panel-a" aria-hidden="true"></div>
|
|
<div class="panel panel-b" aria-hidden="true"></div>
|
|
<h1 class="title">秩序之间</h1>
|
|
<p class="copy">以留白建立关系，
|
|
让视线缓慢移动。</p>
|
|
<div class="edition"><span>FORM / STUDIES</span><span>2026 · 01</span></div>
|
|
</article></div>
|
|
</body>
|
|
</html>
|