栖墨文学馆古诗词阅读主页 HTML 单页源码

这是一款面向传统文化、古诗词与文学阅读场景设计的国风单页模板。整体采用米白宣纸色作为底色，搭配深墨色文字、朱红色印章点缀与竖排元素，营造出古典、安静、书卷气的阅读氛围。首屏以「栖墨」二字为视觉中心，配合每日一诗和每日诗句展示，让访客一进门就能感受到诗词的意境。

页面主体由六宫格诗词卡片组成，每张卡片展示了诗名、作者、朝代和开篇几句，右上角采用竖排文字标注诗词类型与体裁，保留了传统版式的美感。下方还设有「节气专题」双栏模块，适合围绕时令、主题或节日组织系列阅读内容，增强用户粘性。

非常适合文化类公众号、个人读书博客、学校语文栏目或传统文化爱好者搭建轻量诗词主页。只需替换卡片中的诗词内容、专题文案与印章文案，就能上线一个具有东方美学气质的阅读页面。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栖墨文学馆 · 古诗词阅读</title>
<style>
  :root{
    --paper:#f5f1e8; --paper2:#ece5d6; --ink:#2c2a26; --ink2:#5a544a;
    --seal:#a8443a; --line:rgba(44,42,38,.14); --gold:#9c7a3c;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Songti SC","STSong","PingFang SC",serif;background:
    radial-gradient(1200px 700px at 50% -10%,#fbf8f0,transparent),
    var(--paper);color:var(--ink);line-height:1.9;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 28px}
  header{display:flex;justify-content:space-between;align-items:center;padding:28px 0}
  .brand{display:flex;align-items:baseline;gap:14px}
  .brand .cn{font-size:26px;letter-spacing:6px;font-weight:600}
  .brand .en{font-size:12px;color:var(--ink2);letter-spacing:3px}
  nav a{margin-left:26px;color:var(--ink2);font-size:15px;letter-spacing:2px;transition:.2s}
  nav a:hover{color:var(--seal)}
  .hero{padding:70px 0 50px;text-align:center;position:relative}
  .hero .seal{display:inline-block;color:#fff;background:var(--seal);font-size:13px;
    padding:4px 10px;border-radius:4px;letter-spacing:2px;margin-bottom:22px;transform:rotate(-2deg)}
  .hero h1{font-size:56px;letter-spacing:18px;font-weight:400;margin-bottom:18px}
  .hero p{color:var(--ink2);font-size:17px;max-width:520px;margin:0 auto 30px}
  .verse{display:inline-flex;gap:18px;font-size:18px;color:var(--ink2);letter-spacing:3px}
  .verse span{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--paper2)}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:30px 0 60px}
  .card{background:var(--paper2);border:1px solid var(--line);border-radius:12px;padding:26px 22px;
    transition:.28s;position:relative;overflow:hidden}
  .card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(44,42,38,.12)}
  .card .dyn{position:absolute;top:14px;right:16px;writing-mode:vertical-rl;font-size:13px;
    color:var(--gold);letter-spacing:4px;opacity:.7}
  .card h3{font-size:21px;font-weight:500;letter-spacing:2px;margin-bottom:6px}
  .card .au{color:var(--seal);font-size:14px;margin-bottom:14px}
  .card p{color:var(--ink2);font-size:15px}
  .feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:60px 0;border-top:1px solid var(--line)}
  .feature .txt h2{font-size:30px;font-weight:400;letter-spacing:4px;margin-bottom:16px}
  .feature .txt p{color:var(--ink2);margin-bottom:14px}
  .feature .art{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);
    background:linear-gradient(135deg,#efe8d8,#e3d9c4);position:relative;overflow:hidden}
  .feature .art::after{content:"詩";position:absolute;inset:0;display:grid;place-items:center;
    font-size:140px;color:rgba(156,122,60,.22)}
  .sub{text-align:center;padding:30px 0 70px}
  .sub button{font-family:inherit;background:var(--ink);color:var(--paper);border:none;
    padding:13px 34px;border-radius:10px;font-size:16px;letter-spacing:3px;cursor:pointer}
  footer{text-align:center;padding:34px 0;color:var(--ink2);font-size:13px;border-top:1px solid var(--line);letter-spacing:1px}
  @media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.hero h1{font-size:40px}
    .feature{grid-template-columns:1fr;gap:28px}.verse{flex-wrap:wrap;justify-content:center}}
  @media(max-width:540px){.grid{grid-template-columns:1fr}nav{display:none}}
</style>
</head>
<body>
<header class="wrap">
  <div class="brand"><span class="cn">栖墨文学馆</span><span class="en">QIMO · CLASSICAL POETRY</span></div>
  <nav><a href="#read">阅读</a><a href="#topic">专题</a><a href="#about">关于</a></nav>
</header>

<section class="wrap hero">
  <span class="seal">每日一诗</span>
  <h1>栖　墨</h1>
  <p>一处安放古典诗词的安静角落。读诗、抄诗、临帖，让千百年前的月光，落进今天的窗台。</p>
  <div class="verse"><span>落霞与孤鹜齐飞</span><span>秋水共长天一色</span></div>
</section>

<main class="wrap grid" id="read">
  <article class="card"><span class="dyn">唐 · 五言</span><h3>山居秋暝</h3><div class="au">王维</div><p>空山新雨后，天气晚来秋。明月松间照，清泉石上流。</p></article>
  <article class="card"><span class="dyn">宋 · 词</span><h3>青玉案·元夕</h3><div class="au">辛弃疾</div><p>东风夜放花千树，更吹落、星如雨。宝马雕车香满路。</p></article>
  <article class="card"><span class="dyn">唐 · 七绝</span><h3>静夜思</h3><div class="au">李白</div><p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p></article>
  <article class="card"><span class="dyn">宋 · 词</span><h3>水调歌头</h3><div class="au">苏轼</div><p>明月几时有，把酒问青天。不知天上宫阙，今夕是何年。</p></article>
  <article class="card"><span class="dyn">唐 · 五律</span><h3>春望</h3><div class="au">杜甫</div><p>国破山河在，城春草木深。感时花溅泪，恨别鸟惊心。</p></article>
  <article class="card"><span class="dyn">唐 · 七绝</span><h3>相思</h3><div class="au">王维</div><p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p></article>
</main>

<section class="wrap feature" id="topic">
  <div class="txt">
    <h2>节气 · 专题阅读</h2>
    <p>我们按二十四节气与古典意象编排专题，立春读「春风」，中秋读「明月」，让诗词与当下的时令彼此呼应。</p>
    <p>每个专题都附有注释、译文与朗读音频，适合安静的夜晚，或通勤路上的一段陪伴。</p>
  </div>
  <div class="art"></div>
</section>

<section class="wrap sub" id="about">
  <button>开始今日阅读 →</button>
</section>

<footer>© 2026 栖墨文学馆 · 慢读一首诗，安放一段心</footer>
</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1948.html