网站 UI 实现：布局、层叠与交互状态

<article class="task-copy" lang="zh-CN">
  <h2>提交任务前</h2>
  <p>请核对文件名称、处理状态和预计完成时间。</p>
  <p>附件可以包含中文、API 名称和数字，例如 build-128。</p>
</article>
<style>
  .task-copy {
    box-sizing: border-box;
    max-width: 36rem;
    margin-inline: auto;
    padding: 1rem;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
  }
  .task-copy p { margin: 0; }
  .task-copy p + p { margin-block-start: 0.8em; }
  .task-copy h2 {
    margin: 1.5em 0 0.5em;
    font-size: 1.35em;
    line-height: 1.3;
  }
</style>

/* 本文实验参数：分别控制角色，不放在全局 body 上。 */
.task-sheet { letter-spacing: normal; }
.task-sheet .eyebrow[lang="en"] { letter-spacing: 0.08em; }
.task-sheet .latin-title { font-kerning: normal; }

<table class="costs">
  <caption>预计费用，单位：人民币元</caption>
  <thead><tr><th scope="col">项目</th><th scope="col">金额</th></tr></thead>
  <tbody>
    <tr><th scope="row">文件处理</th><td>9.90</td></tr>
    <tr><th scope="row">资料整理</th><td>1,000.00</td></tr>
    <tr><th scope="row">导出</th><td>12.00</td></tr>
  </tbody>
</table>
<style>
  .costs { width: 100%; border-collapse: collapse; }
  .costs caption { text-align: start; margin-block-end: 0.75rem; }
  .costs th, .costs td {
    padding: 0.75rem 1rem;
    border-block-end: 1px solid #d7dde0;
    text-align: start;
  }
  .costs tbody th { font-weight: 400; }
  .costs th:last-child, .costs td:last-child { text-align: end; }
  .costs td { font-variant-numeric: tabular-nums; }
</style>

<article class="task-sheet" lang="zh-CN">
  <header>
    <h1>整理季度附件</h1>
    <p class="task-meta">任务 00128 · 状态：待审核</p>
  </header>

  <section class="task-section" aria-labelledby="task-description">
    <h2 id="task-description">任务说明</h2>
    <div class="task-prose">
      <p>请核对文件名称和处理范围，再提交本次任务。</p>
      <p>本次附件为 128&nbsp;MB，包含 API 说明与 build-128 记录。</p>
    </div>
  </section>

  <section class="task-section" aria-labelledby="task-attachment">
    <h2 id="task-attachment">附件</h2>
    <p><code>quarterly-build-128.pdf</code></p>
    <p class="task-meta">上传完成 · 1 个文件</p>
  </section>

  <section class="task-section" aria-labelledby="task-costs">
    <h2 id="task-costs">预计费用</h2>
    <table>
      <caption>单位：人民币元</caption>
      <thead><tr><th scope="col">项目</th><th scope="col">金额</th></tr></thead>
      <tbody>
        <tr><th scope="row">文件处理</th><td>9.90</td></tr>
        <tr><th scope="row">资料整理</th><td>1,000.00</td></tr>
        <tr><th scope="row">导出</th><td>12.00</td></tr>
      </tbody>
      <tfoot><tr><th scope="row">合计</th><td>1,021.90</td></tr></tfoot>
    </table>
  </section>

  <footer class="task-section">
    <p class="task-meta">保存仅记录当前修改，任务仍需另行提交。</p>
    <button type="button">保存修改</button>
  </footer>
</article>

.task-sheet {
  box-sizing: border-box;
  max-inline-size: 52rem;
  margin-inline: auto;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: normal;
  color: #172b35;
  background: white;
}
.task-sheet :where(h1, h2, p) { margin: 0; }
.task-sheet h1 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.task-sheet h2 {
  margin-block-end: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}
.task-sheet .task-section { margin-block-start: 2rem; }
.task-sheet .task-prose { max-inline-size: 36rem; }
.task-sheet .task-prose p + p { margin-block-start: 0.8em; }
.task-sheet .task-meta {
  margin-block-start: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #485d68;
}
.task-sheet code {
  font-family: ui-monospace, monospace;
  font-size: 0.95em;
  overflow-wrap: anywhere;
}
.task-sheet table { inline-size: 100%; border-collapse: collapse; }
.task-sheet caption { text-align: start; margin-block-end: 0.75rem; }
.task-sheet :where(th, td) {
  padding: 0.75rem 1rem;
  border-block-end: 1px solid #d7dde0;
  text-align: start;
}
.task-sheet tbody th { font-weight: 400; }
.task-sheet :where(th, td):last-child { text-align: end; }
.task-sheet td { font-variant-numeric: tabular-nums; }
.task-sheet tfoot { font-weight: 600; }
.task-sheet :where(thead, tfoot) th { font-weight: 600; }
.task-sheet[data-density="compact"] :where(th, td) {
  padding-block: 0.5rem;
}
.task-sheet button {
  margin-block-start: 1rem;
  padding: 0.625rem 1rem;
  font: inherit;
}

<section class="task-grid" aria-label="任务概况">
  <article>
    <h2>待整理附件</h2>
    <p>四个文件需要补全名称与处理状态。</p>
    <div class="task-actions">
      <button type="button">查看附件</button>
      <button type="button">下载清单</button>
    </div>
  </article>
  <article>
    <h2>费用核对</h2>
    <p>确认计费项目后，再提交本次修改。</p>
  </article>
</section>
<style>
  .task-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .task-grid > article { min-width: 0; }
  .task-grid h2 { margin: 0 0 0.5em; }
  .task-grid p { margin: 0 0 1em; line-height: 1.6; }
  .task-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  @media (max-width: 42rem) {
    .task-grid { grid-template-columns: minmax(0, 1fr); }
  }
</style>

<div class="pair"><div>A</div><div>B</div></div>
<style>
  .pair { display: flex; width: 300px; }
  .pair > div {
    width: 200px;
    min-width: 0;
    height: 40px;
    background: #dce9ed;
  }
</style>

<div class="sizing-lab">
  <div class="sizing-a">A</div>
  <div class="sizing-b">B</div>
</div>
<style>
  .sizing-lab { display: flex; width: 340px; gap: 20px; }
  .sizing-a, .sizing-b {
    min-width: 0;
    height: 40px;
    line-height: 40px;
    outline: 1px solid #426273;
    background: #e4edf1;
  }
  .sizing-a { flex: 0 1 240px; }
  .sizing-b { flex: 0 1 160px; }
</style>

<div class="attachment">
  <span class="attachment-icon" aria-hidden="true">↳</span>
  <p class="attachment-name">
    b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0b1c2d3e4f5a6b7c8.pdf
  </p>
</div>
<style>
  .attachment { display: flex; align-items: start; gap: 12px; }
  .attachment-icon { flex: 0 0 24px; }
  .attachment-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }
</style>

<section class="file-sample" aria-label="附件名称">
  <div class="file-row">
    <span class="file-icon" aria-hidden="true">↳</span>
    <span class="file-short">taskarchive20261022revision018completeattachmentmanifest.pdf</span>
  </div>
  <details>
    <summary>查看完整文件名</summary>
    <p class="file-full">taskarchive20261022revision018completeattachmentmanifest.pdf</p>
  </details>
</section>
<style>
  .file-sample { width: min(100%, 22rem); }
  .file-row { display: flex; gap: 12px; }
  .file-icon { flex: 0 0 24px; }
  .file-short {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .file-sample details { margin-block-start: 8px; }
  .file-full { margin: 8px 0 0; overflow-wrap: anywhere; }
</style>

<header class="page-bar">页头：层级 2</header>
<main class="task-content">
  <div class="task-menu">菜单：层级 999</div>
</main>
<style>
  .page-bar {
    position: relative;
    z-index: 2;
    height: 40px;
    background: #d8dfdf;
  }
  .task-content { position: relative; z-index: 1; }
  .task-menu {
    position: absolute;
    top: -20px;
    z-index: 999;
    background: #f5d59d;
  }
</style>

<div class="crop-zone">
  <p>有裁切边界的任务卡片</p>
  <button type="button" popovertarget="task-floating-note">打开原生说明</button>
  <div class="cropped-menu">普通元素：右侧与底部被裁掉</div>
  <div id="task-floating-note" popover>
    <p>这段说明进入浏览器顶层，不受外面卡片的 overflow 裁切。</p>
    <button type="button" popovertarget="task-floating-note"
      popovertargetaction="hide">关闭说明</button>
  </div>
</div>
<style>
  .crop-zone {
    position: relative;
    width: 260px;
    height: 100px;
    padding: 12px;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #426273;
  }
  .crop-zone > p { margin: 0 0 8px; }
  .cropped-menu {
    position: absolute;
    left: 12px;
    top: 80px;
    width: 280px;
    padding: 8px;
    z-index: 9999;
    background: #f5d59d;
  }
  #task-floating-note {
    max-width: min(28rem, calc(100vw - 2rem));
    box-sizing: border-box;
    padding: 1rem;
  }
</style>

.task-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgb(30 45 70 / 0.18);
}

.task-popover {
  background: white;
  border-radius: 10px;
  box-shadow:
    0 1px 2px rgb(30 45 70 / 0.10),
    0 8px 20px rgb(30 45 70 / 0.12);
}

<section class="surface-study" data-theme="dark" aria-label="表面层级练习">
  <article class="surface-panel">
    <h3>常驻任务卡片</h3>
    <p>任务状态与附件信息。</p>
  </article>
  <aside class="surface-panel surface-floating">
    <h3>临时说明表面</h3>
    <p>只在需要时展示的补充内容。</p>
  </aside>
</section>
<style>
  .surface-study {
    --canvas: #eaf0f2;
    --surface: #ffffff;
    --raised: #ffffff;
    --ink: #18313d;
    --edge: rgb(30 45 70 / 0.18);
    --shadow: rgb(10 20 30 / 0.14);
    display: grid;
    gap: 24px;
    padding: 28px;
    background: var(--canvas);
    color: var(--ink);
  }
  .surface-study[data-theme="dark"] {
    --canvas: #0f1820;
    --surface: #192732;
    --raised: #253642;
    --ink: #edf4f8;
    --edge: rgb(255 255 255 / 0.16);
    --shadow: rgb(0 0 0 / 0.32);
  }
  .surface-panel {
    padding: 20px;
    border: 1px solid var(--edge);
    border-radius: 10px;
    background: var(--surface);
  }
  .surface-panel h3 { margin: 0 0 8px; }
  .surface-panel p { margin: 0; line-height: 1.6; }
  .surface-floating {
    background: var(--raised);
    box-shadow: 0 2px 4px var(--shadow), 0 12px 24px var(--shadow);
  }
</style>

<button class="save-button" type="button">
  <span class="save-face">保存修改</span>
</button>
<style>
  .save-button {
    padding: 6px 0 0;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(transparent 6px, #13364a 6px);
    color: white;
    font: inherit;
    cursor: pointer;
  }
  .save-face {
    display: block;
    min-height: 44px;
    box-sizing: border-box;
    padding: 11px 20px;
    border-radius: inherit;
    background: #24566e;
    transform: translateY(-2px);
  }
  .save-button:focus-visible {
    outline: 3px solid #172b35;
    outline-offset: 4px;
  }
  @media (hover: hover) {
    .save-button:not(:disabled):hover .save-face {
      transform: translateY(-4px);
    }
  }
  .save-button:not(:disabled):active .save-face {
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: no-preference) {
    .save-face { transition: transform 160ms ease-out; }
    .save-button:not(:disabled):active .save-face {
      transition-duration: 40ms;
    }
  }
</style>

<!doctype html>
<html lang="zh-CN">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>任务保存状态练习</title>
<style>
  body { max-width: 34rem; margin: 2rem auto; padding: 1rem;
    color: #172b35; font: 16px/1.6 system-ui, sans-serif; }
  label { display: block; margin-block: 0.75rem; }
  input[type="text"] { display: block; box-sizing: border-box;
    width: 100%; padding: 0.7rem; font: inherit; }
  .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  button { min-height: 44px; padding: 0.6rem 1rem; font: inherit; }
  button:focus-visible { outline: 3px solid #24566e; outline-offset: 3px; }
  button[aria-disabled="true"] { opacity: 0.65; cursor: wait; }
  #save-status { min-height: 3.2em; }
</style>
<h1>修改任务名称</h1>
<form id="task-form" aria-describedby="save-help">
  <label for="task-title">任务名称</label>
  <input id="task-title" type="text" required maxlength="80"
    value="整理活动页面">
  <label><input id="simulate-failure" type="checkbox">模拟失败</label>
  <div class="form-actions">
    <button id="save" type="submit" aria-disabled="false">保存修改</button>
    <button id="stop" type="button" disabled>停止等待</button>
  </div>
</form>
<p id="save-help">本地模拟：等待约 1.2 秒。输入不会上传或持久化。</p>
<p id="save-status" role="status" aria-atomic="true">有未保存修改。</p>
<script>
  const form = document.querySelector('#task-form');
  const titleInput = document.querySelector('#task-title');
  const failureInput = document.querySelector('#simulate-failure');
  const saveButton = document.querySelector('#save');
  const stopButton = document.querySelector('#stop');
  const statusText = document.querySelector('#save-status');
  let activeController = null;

  function pending(value) {
    form.setAttribute('aria-busy', String(value));
    saveButton.setAttribute('aria-disabled', String(value));
    saveButton.textContent = value ? '正在保存…' : '保存修改';
    titleInput.readOnly = value;
    failureInput.disabled = value;
    stopButton.disabled = !value;
  }

  function simulatedSave(title, shouldFail, signal) {
    return new Promise((resolve, reject) => {
      if (signal.aborted) {
        reject(signal.reason);
        return;
      }
      const onAbort = () => {
        clearTimeout(timer);
        reject(new DOMException('已停止本地等待', 'AbortError'));
      };
      const timer = setTimeout(() => {
        signal.removeEventListener('abort', onAbort);
        if (shouldFail) reject(new Error('模拟失败，请保留输入并重试。'));
        else resolve({ title });
      }, 1200);
      signal.addEventListener('abort', onAbort, { once: true });
    });
  }

  titleInput.addEventListener('input', () => {
    titleInput.setCustomValidity('');
    if (!activeController) statusText.textContent = '有未保存修改。';
  });

  form.addEventListener('submit', async (event) => {
    event.preventDefault();
    if (activeController) return;
    const title = titleInput.value.trim();
    if (!title) {
      titleInput.setCustomValidity('请输入任务名称。');
      titleInput.reportValidity();
      return;
    }
    const shouldFail = failureInput.checked;
    const controller = new AbortController();
    activeController = controller;
    pending(true);
    statusText.textContent = '正在保存，请稍候。';
    try {
      const result = await simulatedSave(title, shouldFail, controller.signal);
      if (activeController === controller) {
        statusText.textContent = '已保存任务名称：' + result.title;
      }
    } catch (error) {
      if (activeController === controller) {
        statusText.textContent = controller.signal.aborted
          ? '已停止本地等待，输入仍然保留。'
          : error.message;
      }
    } finally {
      if (activeController === controller) {
        const returnFocus = document.activeElement === stopButton;
        activeController = null;
        pending(false);
        if (returnFocus) saveButton.focus();
      }
    }
  });

  stopButton.addEventListener('click', () => activeController?.abort());
</script>
</html>