卡片、列表与内容组织
垂直时间轴

用于展示项目进度与关键节点的自适应时间轴。
HTMLCSS时间轴布局
启用 JavaScript 后可编辑、运行和保存此案例。固定源码如下：
<!doctype html>
<html lang="zh-Hans" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>垂直时间轴</title>
  <style>
    * { box-sizing: border-box; }
    body { min-height: 100vh; margin: 0; padding: clamp(34px, 7vw, 80px) 20px; color: #f2eee6; font-family: "Optima", "Microsoft YaHei", sans-serif; background: #152d2a; background-image: linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%); background-size: 36px 62px; }
    main { width: min(850px, 100%); margin: auto; }
    header { margin-bottom: 44px; }
    .year { color: #eeb95e; font-size: 12px; font-weight: 800; letter-spacing: .25em; }
    h1 { margin: 10px 0 12px; font: 700 clamp(40px, 8vw, 72px)/1 "STKaiti", "KaiTi", serif; }
    header p { max-width: 590px; margin: 0; color: #aebfba; line-height: 1.7; }
    .timeline { position: relative; }
    .timeline::before { content: ""; position: absolute; left: 104px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(#eeb95e, rgba(238,185,94,.1)); }
    article { position: relative; display: grid; grid-template-columns: 82px 1fr; gap: 52px; padding-bottom: 42px; }
    article:last-child { padding-bottom: 0; }
    time { padding-top: 5px; color: #eeb95e; font: 700 13px/1.2 ui-monospace, monospace; text-align: right; }
    .marker { position: absolute; left: 98px; top: 7px; width: 13px; height: 13px; border: 3px solid #152d2a; border-radius: 50%; background: #eeb95e; box-shadow: 0 0 0 1px #eeb95e, 0 0 22px rgba(238,185,94,.5); }
    .event { padding: 0 0 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
    article:last-child .event { border-bottom: 0; }
    .event small { color: #70b8a7; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
    h2 { margin: 8px 0 10px; font: 700 clamp(24px, 4vw, 34px)/1.2 Georgia, "STSong", serif; }
    .event p { margin: 0; color: #aebfba; line-height: 1.7; }
    .tag { display: inline-block; margin-top: 16px; padding: 6px 10px; border: 1px solid rgba(238,185,94,.38); border-radius: 999px; color: #eeb95e; font-size: 11px; }
    @media (max-width: 580px) { .timeline::before { left: 8px; } article { grid-template-columns: 1fr; gap: 8px; padding-left: 34px; } time { text-align: left; } .marker { left: 2px; } }
  </style>
</head>
<body>
  <main>
    <header><span class="year">MILESTONES · 2026</span><h1>一粒种子的旅程</h1><p>从第一张草图到产品真正抵达用户手中，每个节点都值得被认真记录。</p></header>
    <section class="timeline" aria-label="项目时间轴">
      <article><time datetime="2026-01">01 / JAN</time><i class="marker" aria-hidden="true"></i><div class="event"><small>IDEA</small><h2>概念萌芽</h2><p>团队用三天时间访谈了十二位用户，整理出最重要的使用场景与核心假设。</p><span class="tag">方向确认</span></div></article>
      <article><time datetime="2026-03">18 / MAR</time><i class="marker" aria-hidden="true"></i><div class="event"><small>PROTOTYPE</small><h2>第一版原型</h2><p>低保真原型完成，关键路径在两轮测试后从七个步骤精简到四个。</p><span class="tag">体验验证</span></div></article>
      <article><time datetime="2026-05">06 / MAY</time><i class="marker" aria-hidden="true"></i><div class="event"><small>BUILD</small><h2>进入开发</h2><p>设计系统、数据模型和基础组件同步落地，第一条完整业务链路正式跑通。</p><span class="tag">功能完成</span></div></article>
      <article><time datetime="2026-07">20 / JUL</time><i class="marker" aria-hidden="true"></i><div class="event"><small>LAUNCH</small><h2>准备启程</h2><p>完成性能与无障碍检查，邀请首批用户参与体验，一段新的旅程即将开始。</p><span class="tag">即将发布</span></div></article>
    </section>
  </main>
</body>
</html>