下面给出文章详情页（post-detail）最小可执行模板，完全符合你现在的项目习惯：样式独立到 CSS 文件、图片来自本地，并提供主行代码与带注释代码两套。

① 主行代码（可直接运行）

建议文件结构

/post-detail.html
/css/post-detail.css
/assets/images/post-hero.jpg      ← 本地封面图（你可用现有 blog1.jpg 代替）

A. `post-detail.html`

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>从零实现博客卡片布局 · 文章详情</title>
  <link rel="stylesheet" href="css/post-detail.css" />
</head>
<body>
  <main class="container">
    <article class="post">
      <header class="post-header">
        <nav class="breadcrumb" aria-label="面包屑导航">
          <a class="breadcrumb-link" href="index.html">首页</a>
          <span class="sep">/</span>
          <a class="breadcrumb-link" href="index.html#articles">文章</a>
          <span class="sep">/</span>
          <span class="current">从零实现博客卡片布局</span>
        </nav>

        <h1 class="post-title">从零实现博客卡片布局</h1>
        <div class="post-meta">
          <time datetime="2025-08-20">2025-08-20</time>
          <span class="dot">·</span>
          <span class="category">前端基础</span>
          <span class="dot">·</span>
          <span class="reading">约 3 分钟阅读</span>
        </div>

        <img class="post-hero" src="assets/images/post-hero.jpg" alt="文章封面：卡片布局示意图" />
      </header>

      <section class="post-content">
        <p>本文演示如何用 <strong>Flexbox</strong> 快速完成三列卡片，在平板与手机端自然收敛为两列/一列，同时保证标题、摘要与按钮的清晰层级。</p>

        <h2>一、目标与页面骨架</h2>
        <p>页面分为 <code>&lt;section class="grid"&gt;</code> 容器与若干 <code>&lt;article class="card"&gt;</code> 子项。容器控制排版，子项负责内容与视觉。</p>

        <h2>二、关键样式（节选）</h2>
        <pre><code>.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 calc(33.333% - 16px); min-width: 260px; }</code></pre>

        <figure>
          <img src="assets/images/post-hero.jpg" alt="卡片列表示意图（本地图片复用）" />
          <figcaption>图 1：三列卡片在不同屏宽下的自适应示意。</figcaption>
        </figure>

        <h2>三、可读性与交互</h2>
        <p>通过一致的圆角、阴影与 <em>hover</em> 轻抬升效果，建立层级感；主按钮使用品牌色，次按钮使用线框样式。</p>
      </section>

      <footer class="post-footer">
        <a class="btn" href="index.html#articles">← 返回列表</a>
        <nav class="pager" aria-label="文章翻页">
          <a class="btn btn-ghost" href="#">上一篇</a>
          <a class="btn btn-ghost" href="#">下一篇</a>
        </nav>
      </footer>
    </article>
  </main>
</body>
</html>

B. `css/post-detail.css`

:root{
  --gap:16px;
  --radius:12px;
  --shadow:0 6px 20px rgba(0,0,0,.08);
  --brand:#2563eb;
  --text:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --content: #0b1220;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--content);
  background:var(--bg);
}
.container{ max-width:860px; margin:0 auto; padding:24px; }

.post-header{ margin-bottom:24px; }
.breadcrumb{ font-size:14px; color:#64748b; display:flex; align-items:center; gap:8px; }
.breadcrumb-link{ color:#64748b; text-decoration:none; }
.breadcrumb-link:hover{ text-decoration:underline; }
.sep{ opacity:.6; }
.current{ color:var(--text); }

.post-title{ font-size:32px; line-height:1.25; margin:8px 0 8px; color:var(--text); }
.post-meta{ color:#64748b; display:flex; align-items:center; gap:8px; font-size:14px; }
.dot{ opacity:.5; }

.post-hero{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius);
  margin-top:16px; box-shadow:var(--shadow);
}

.post-content{
  margin-top:24px; font-size:16px; line-height:1.8; color:var(--content);
}
.post-content h2{ font-size:22px; margin:24px 0 8px; color:var(--text); }
.post-content p{ margin:10px 0; }
.post-content code{ background:#eef2ff; padding:2px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.post-content pre{
  background:#0b1220; color:#e5e7eb; padding:14px; border-radius:10px; overflow:auto;
}
.post-content figure{ margin:18px 0; }
.post-content figure img{ width:100%; border-radius:10px; }
.post-content figcaption{ font-size:12px; color:#64748b; margin-top:6px; text-align:center; }

.post-footer{
  margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.btn{
  appearance:none; border:0; background:var(--brand); color:#fff;
  padding:10px 14px; border-radius:999px; text-decoration:none; font-size:14px; cursor:pointer;
}
.btn-ghost{
  background:transparent; color:var(--brand); border:1px solid var(--brand);
}
.pager{ display:flex; gap:10px; }

/* 响应式 */
@media (max-width:600px){
  .container{ padding:16px; }
  .post-title{ font-size:26px; }
}

集成到你的现有结构：若你已有 core.css 聚合入口，可把本文件内容合并到 content.css（或新建 post-detail.css 并让 core.css 用 @import 引入），post-detail.html 的 <head> 就只保留 core.css 的 <link>。

② 带注释代码（教学/讲义版）

A\*. `post-detail.html`（逐行注释）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 基础：编码与移动端视口 -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>从零实现博客卡片布局 · 文章详情</title>
  <!-- 外链 CSS：与项目风格一致，便于复用/维护 -->
  <link rel="stylesheet" href="css/post-detail.css" />
</head>
<body>
  <!-- 主体容器：控制阅读宽度 -->
  <main class="container">
    <!-- 语义化：整篇文章使用 <article> -->
    <article class="post">
      <header class="post-header">
        <!-- 面包屑：可返回首页或文章列表锚点 -->
        <nav class="breadcrumb" aria-label="面包屑导航">
          <a class="breadcrumb-link" href="index.html">首页</a>
          <span class="sep">/</span>
          <a class="breadcrumb-link" href="index.html#articles">文章</a>
          <span class="sep">/</span>
          <span class="current">从零实现博客卡片布局</span>
        </nav>

        <!-- 主标题 -->
        <h1 class="post-title">从零实现博客卡片布局</h1>

        <!-- 元信息：发布日期、分类、阅读时长 -->
        <div class="post-meta">
          <time datetime="2025-08-20">2025-08-20</time>
          <span class="dot">·</span>
          <span class="category">前端基础</span>
          <span class="dot">·</span>
          <span class="reading">约 3 分钟阅读</span>
        </div>

        <!-- 本地封面图：统一比例与圆角 -->
        <img class="post-hero" src="assets/images/post-hero.jpg" alt="文章封面：卡片布局示意图" />
      </header>

      <!-- 正文：段落、标题、小段代码与插图 -->
      <section class="post-content">
        <p>本文演示如何用 <strong>Flexbox</strong> 快速完成三列卡片...</p>

        <h2>一、目标与页面骨架</h2>
        <p>页面分为 <code>&lt;section class="grid"&gt;</code> 容器与若干 <code>&lt;article class="card"&gt;</code> 子项...</p>

        <h2>二、关键样式（节选）</h2>
        <pre><code>.grid { display: flex; flex-wrap: wrap; gap: 16px; }
.card { flex: 1 1 calc(33.333% - 16px); min-width: 260px; }</code></pre>

        <figure>
          <img src="assets/images/post-hero.jpg" alt="卡片列表示意图（本地图片复用）" />
          <figcaption>图 1：三列卡片在不同屏宽下的自适应示意。</figcaption>
        </figure>

        <h2>三、可读性与交互</h2>
        <p>通过一致的圆角、阴影与 <em>hover</em> 轻抬升效果...</p>
      </section>

      <!-- 页脚：返回列表 + 上一篇/下一篇（占位） -->
      <footer class="post-footer">
        <a class="btn" href="index.html#articles">← 返回列表</a>
        <nav class="pager" aria-label="文章翻页">
          <a class="btn btn-ghost" href="#">上一篇</a>
          <a class="btn btn-ghost" href="#">下一篇</a>
        </nav>
      </footer>
    </article>
  </main>
</body>
</html>

B\*. `css/post-detail.css`（逐段注释）

/* 统一设计变量：间距、圆角、阴影、品牌色等 */
:root{
  --gap:16px; --radius:12px; --shadow:0 6px 20px rgba(0,0,0,.08);
  --brand:#2563eb; --text:#0f172a; --muted:#475569; --bg:#f8fafc; --content:#0b1220;
}

/* 盒模型收敛：padding/border 不再撑破布局 */
*{ box-sizing:border-box; }

/* 基础排版与背景 */
body{ margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--content); background:var(--bg); }

/* 居中阅读宽度（≈专栏文章体验） */
.container{ max-width:860px; margin:0 auto; padding:24px; }

/* 头部与面包屑 */
.post-header{ margin-bottom:24px; }
.breadcrumb{ font-size:14px; color:#64748b; display:flex; align-items:center; gap:8px; }
.breadcrumb-link{ color:#64748b; text-decoration:none; }
.breadcrumb-link:hover{ text-decoration:underline; }
.sep{ opacity:.6; }
.current{ color:var(--text); }

/* 标题与元信息 */
.post-title{ font-size:32px; line-height:1.25; margin:8px 0 8px; color:var(--text); }
.post-meta{ color:#64748b; display:flex; align-items:center; gap:8px; font-size:14px; }
.dot{ opacity:.5; }

/* 封面图：16:9、自适应、圆角阴影 */
.post-hero{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); margin-top:16px; box-shadow:var(--shadow); }

/* 正文排版：字号、行高、代码块、插图说明 */
.post-content{ margin-top:24px; font-size:16px; line-height:1.8; color:var(--content); }
.post-content h2{ font-size:22px; margin:24px 0 8px; color:var(--text); }
.post-content p{ margin:10px 0; }
.post-content code{ background:#eef2ff; padding:2px 6px; border-radius:6px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.post-content pre{ background:#0b1220; color:#e5e7eb; padding:14px; border-radius:10px; overflow:auto; }
.post-content figure{ margin:18px 0; }
.post-content figure img{ width:100%; border-radius:10px; }
.post-content figcaption{ font-size:12px; color:#64748b; margin-top:6px; text-align:center; }

/* 页脚：返回按钮与翻页按钮 */
.post-footer{ margin-top:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.btn{ appearance:none; border:0; background:var(--brand); color:#fff; padding:10px 14px; border-radius:999px; text-decoration:none; font-size:14px; cursor:pointer; }
.btn-ghost{ background:transparent; color:var(--brand); border:1px solid var(--brand); }
.pager{ display:flex; gap:10px; }

/* 响应式细化：手机端更紧凑的留白与标题大小 */
@media (max-width:600px){
  .container{ padding:16px; }
  .post-title{ font-size:26px; }
}

使用与联调提示

将你的文章卡片区的“阅读详情”链接指向 post-detail.html，即可完成“首页 → 详情页”的串联。
图片路径用你现有的本地图片亦可（例如把 post-hero.jpg 替换为 assets/images/blog1.jpg）。

① 主行代码（可直接运行）

建议文件结构

A. post-detail.html

B. css/post-detail.css

② 带注释代码（教学/讲义版）

A\*. post-detail.html（逐行注释）

B\*. css/post-detail.css（逐段注释）

使用与联调提示

A. `post-detail.html`

B. `css/post-detail.css`

A\*. `post-detail.html`（逐行注释）

B\*. `css/post-detail.css`（逐段注释）