1. 小蓝资源网首页
  2. 网站源码

独立书店「纸间书屋」HTML 单页源码（米黄纸张 + 苔绿 + 铁锈橙，含荐读书架 + 分类 + 活动日历 + 会员 + 到店地图）

小蓝IT • • 网站源码 • 阅读 12

一间藏在巷子里的独立书店详情页，含荐读书架、图书分类、活动日历、书店空间、阅读会员与到店地图。

本源码是一款为独立书店、二手书屋、社区书店打造的「选书 + 活动 + 会员」单页模板，采用米黄纸张色 + 苔绿 + 铁锈橙主调，视觉上温润、有书卷气，与老城区、独立品牌书店的调性高度契合。首屏左侧用大引号与衬线标题营造慢节奏阅读感，右侧「本周荐读」小书架直接展示三本新进好书，让访客一眼看到选书人的口味。

页面内容覆盖独立书店的核心运营场景：八大图书分类用色块网格呈现；近期活动用日期 + 标题 + 报名余量卡片化展示，包含共读会、作者见面、手作工坊、夜间放映等真实品类；书店空间分别介绍选书区、长桌区、后院工作台三个独立区域；三档会员（常客 / 书友 / 共建人）按年付费并明确权益；最末的到店信息用手绘简化地图配 POI 标签，把交通、营业时间一并解决。

适合独立书店主理人、社区文化空间、读书会组织作为官网或活动报名落地页使用。替换店名、书目、活动、会员价与地址后即可上线，也可作为小而美线下空间的品牌展示模板。

独立书店「纸间书屋」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:#f6f1e6;
    --paper-2:#efe7d6;
    --ink:#2f3b34;
    --ink-l:#6b7a70;
    --moss:#3f5c48;
    --moss-d:#2b4232;
    --rust:#b05f36;
    --line:#ddd2ba;
    --card:#fffdf8;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Songti SC","Source Han Serif SC",Georgia,"Microsoft YaHei",serif;background:var(--paper);color:var(--ink);line-height:1.9}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  a{text-decoration:none}

  header{border-bottom:1px double var(--line);background:var(--paper)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:88px}
  .logo{font-size:23px;letter-spacing:5px;font-weight:600}
  .logo small{display:block;font-size:10px;letter-spacing:4px;color:var(--rust);font-weight:400;margin-top:-2px}
  .nav ul{display:flex;gap:32px;list-style:none;font-size:15px}
  .nav ul a{color:var(--ink-l);position:relative;transition:.25s}
  .nav ul a:hover{color:var(--moss)}
  .nav ul a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--rust);transition:.3s}
  .nav ul a:hover::after{right:0}
  .join{border:1px solid var(--moss);color:var(--moss);padding:9px 22px;font-size:14px;letter-spacing:2px}

  /* hero */
  .hero{padding:72px 0 84px;position:relative}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
  .quote-mark{font-size:72px;color:var(--line);line-height:.6;margin-bottom:14px;font-family:Georgia,serif}
  .hero h1{font-size:42px;line-height:1.55;font-weight:600;margin-bottom:22px;letter-spacing:1px}
  .hero h1 em{font-style:normal;color:var(--rust);border-bottom:1px solid var(--rust)}
  .hero p{color:var(--ink-l);font-size:16px;max-width:470px;margin-bottom:30px;line-height:2.1}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .btn{padding:13px 30px;font-size:15px;letter-spacing:2px;display:inline-block;transition:.25s;border:1px solid transparent}
  .b-solid{background:var(--moss);color:var(--paper)}
  .b-solid:hover{background:var(--moss-d)}
  .b-line{border-color:var(--ink);color:var(--ink)}
  .b-line:hover{border-color:var(--rust);color:var(--rust)}

  .shelf{background:var(--card);border:1px solid var(--line);padding:34px 30px;position:relative}
  .shelf::before{content:"本周荐读";position:absolute;top:-13px;left:28px;background:var(--paper);padding:0 12px;font-size:13px;letter-spacing:4px;color:var(--rust)}
  .bk{display:flex;gap:18px;padding:16px 0;border-bottom:1px dashed var(--line)}
  .bk:last-child{border-bottom:0;padding-bottom:0}
  .bk .cover{width:52px;height:74px;flex-shrink:0;border-radius:2px 5px 5px 2px;box-shadow:2px 2px 0 rgba(47,59,52,.12)}
  .c1{background:linear-gradient(135deg,#3f5c48,#294032)}
  .c2{background:linear-gradient(135deg,#b05f36,#8a4526)}
  .c3{background:linear-gradient(135deg,#5c6b7a,#3d4956)}
  .bk h4{font-size:16.5px;font-weight:600;margin-bottom:3px}
  .bk .au{font-size:13px;color:var(--ink-l);margin-bottom:6px}
  .bk .rc{font-size:13.5px;color:var(--ink-l);line-height:1.8}

  section{padding:74px 0}
  .st{text-align:center;margin-bottom:50px}
  .st .k{color:var(--rust);letter-spacing:6px;font-size:12px;margin-bottom:12px}
  .st h2{font-size:30px;font-weight:600;letter-spacing:4px}
  .st .dv{width:60px;height:1px;background:var(--line);margin:18px auto 0;position:relative}
  .st .dv::after{content:"❦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:0 8px;color:var(--rust);font-size:13px}

  /* 分类 */
  .cats{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .cats .st .dv::after{background:var(--card)}
  .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  .ct{background:var(--card);padding:32px 24px;text-align:center;transition:.3s}
  .ct:hover{background:var(--moss);color:var(--paper)}
  .ct:hover .n,.ct:hover .num{color:var(--paper-2)}
  .ct .ic{font-size:30px;margin-bottom:12px}
  .ct .n{font-size:17px;letter-spacing:2px;margin-bottom:5px;font-weight:600}
  .ct .num{font-size:12.5px;color:var(--ink-l);letter-spacing:1px}

  /* 活动日历 */
  .ev{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .e{background:var(--card);border:1px solid var(--line);padding:26px 28px;display:flex;gap:22px;transition:.28s}
  .e:hover{border-color:var(--rust);transform:translateY(-3px)}
  .e .dt{flex-shrink:0;width:62px;text-align:center;border-right:1px solid var(--line);padding-right:18px}
  .e .dt b{display:block;font-size:30px;color:var(--moss);line-height:1.1;font-weight:600}
  .e .dt span{font-size:12px;color:var(--ink-l);letter-spacing:1px}
  .e .bd h3{font-size:18px;font-weight:600;margin-bottom:7px}
  .e .bd .meta{font-size:12.5px;color:var(--rust);letter-spacing:1px;margin-bottom:9px}
  .e .bd p{font-size:14px;color:var(--ink-l);line-height:1.85}
  .e .bd .lim{display:inline-block;margin-top:10px;font-size:12px;border:1px solid var(--line);padding:2px 10px;color:var(--ink-l)}

  /* 空间 */
  .sp{background:var(--moss);color:var(--paper-2)}
  .sp .st h2{color:var(--paper)}
  .sp .st .dv{background:rgba(255,255,255,.28)}
  .sp .st .dv::after{background:var(--moss)}
  .sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .spc{border:1px solid rgba(255,255,255,.2);padding:0;overflow:hidden}
  .spc .im{height:170px;display:grid;place-items:center;font-size:44px}
  .s1{background:rgba(255,255,255,.07)}.s2{background:rgba(176,95,54,.28)}.s3{background:rgba(255,255,255,.12)}
  .spc .tx{padding:22px 24px 26px}
  .spc h4{font-size:18px;color:var(--paper);margin-bottom:8px;letter-spacing:1px}
  .spc p{font-size:13.8px;line-height:1.85;color:rgba(246,241,230,.72)}

  /* 会员 */
  .mb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .mb{background:var(--card);border:1px solid var(--line);padding:34px 30px;position:relative}
  .mb.rec{border:1px solid var(--rust)}
  .mb.rec::before{content:"最受欢迎";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--rust);color:var(--paper);font-size:11.5px;padding:3px 16px;letter-spacing:2px}
  .mb h3{font-size:20px;letter-spacing:3px;margin-bottom:6px;font-weight:600}
  .mb .pr{font-size:34px;color:var(--moss);font-weight:600;margin:14px 0 4px}
  .mb .pr small{font-size:14px;color:var(--ink-l);font-weight:400}
  .mb .yr{font-size:12.5px;color:var(--ink-l);margin-bottom:22px}
  .mb ul{list-style:none;font-size:14px;color:var(--ink-l);line-height:2.3;margin-bottom:24px}
  .mb ul li::before{content:"—　";color:var(--rust)}
  .mb ul li.off{opacity:.4}
  .mb ul li.off::before{content:"×　";color:var(--line)}
  .mb a{display:block;text-align:center;padding:12px;font-size:14.5px;letter-spacing:2px;border:1px solid var(--moss);color:var(--moss);transition:.25s}
  .mb a:hover{background:var(--moss);color:var(--paper)}
  .mb.rec a{background:var(--moss);color:var(--paper)}

  /* 到访 */
  .visit{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .vmap{height:320px;background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden}
  .vmap .rd{position:absolute;background:var(--card)}
  .vr1{left:0;right:0;top:44%;height:13px}
  .vr2{top:0;bottom:0;left:36%;width:11px}
  .vmap .pn{position:absolute;left:36%;top:44%;transform:translate(-50%,-100%);background:var(--rust);color:var(--paper);font-size:12px;padding:5px 13px;white-space:nowrap;letter-spacing:1px}
  .vmap .pn::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--rust)}
  .vmap .lb{position:absolute;font-size:11.5px;color:var(--ink-l);background:rgba(255,253,248,.9);padding:2px 8px}
  .vlist{list-style:none}
  .vlist li{display:flex;gap:18px;padding:18px 0;border-bottom:1px dashed var(--line)}
  .vlist li:last-child{border-bottom:0}
  .vlist i{font-style:normal;font-size:19px;flex-shrink:0;width:34px}
  .vlist b{display:block;font-size:15.5px;font-weight:600;margin-bottom:2px}
  .vlist span{font-size:14px;color:var(--ink-l)}

  footer{background:var(--moss-d);color:rgba(246,241,230,.66);padding:52px 0 26px;font-size:14px}
  .f3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:34px}
  footer h5{color:var(--paper);font-size:16px;letter-spacing:3px;margin-bottom:16px;font-weight:600}
  footer ul{list-style:none;line-height:2.2}
  .cp{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;text-align:center;font-size:12.5px;color:rgba(246,241,230,.42);letter-spacing:1px}

  @media(max-width:900px){
    .nav ul,.join{display:none}
    .hero-grid,.ev,.mb-grid,.visit,.f3{grid-template-columns:1fr}
    .cat-grid,.sp-grid{grid-template-columns:repeat(2,1fr)}
    .hero h1{font-size:28px}
    section{padding:52px 0}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">纸 间 书 屋<small>ZHIJIAN BOOKS</small></div>
    <ul>
      <li><a href="#cat">图书分类</a></li>
      <li><a href="#ev">近期活动</a></li>
      <li><a href="#sp">书店空间</a></li>
      <li><a href="#mb">阅读会员</a></li>
    </ul>
    <a class="join" href="#mb">加入会员</a>
  </div>
</header>

<div class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="quote-mark">“</div>
      <h1>把慢下来的时间，<br>还给一本<em>没读完的书</em></h1>
      <p>纸间书屋开在老城区的一条巷子里，不到八十平米，两千余册选书，以及一张永远有人在写字的长桌。我们不追畅销榜，只挑真正想让人读完的书。</p>
      <div class="hero-btns">
        <a class="btn b-solid" href="#ev">查看近期活动</a>
        <a class="btn b-line" href="#visit">导航到店</a>
      </div>
    </div>
    <div class="shelf">
      <div class="bk">
        <div class="cover c1"></div>
        <div>
          <h4>《山中来信》</h4>
          <div class="au">周砚清　著　│　散文</div>
          <div class="rc">写给城市里所有睡不好觉的人。文字很轻，落地却很重。</div>
        </div>
      </div>
      <div class="bk">
        <div class="cover c2"></div>
        <div>
          <h4>《旧物志》</h4>
          <div class="au">林知远　著　│　非虚构</div>
          <div class="rc">从一把椅子讲到一个时代，考据扎实，读起来却不累。</div>
        </div>
      </div>
      <div class="bk">
        <div class="cover c3"></div>
        <div>
          <h4>《长夜将尽》</h4>
          <div class="au">苏亦然　著　│　小说</div>
          <div class="rc">今年读到最好的中文长篇，后三十页建议留在白天看。</div>
        </div>
      </div>
    </div>
  </div>
</div>

<section class="cats" id="cat">
  <div class="wrap">
    <div class="st">
      <div class="k">CATEGORIES</div>
      <h2>图 书 分 类</h2>
      <div class="dv"></div>
    </div>
    <div class="cat-grid">
      <div class="ct"><div class="ic">📖</div><div class="n">文学与小说</div><div class="num">612 册在架</div></div>
      <div class="ct"><div class="ic">🏛️</div><div class="n">历史与人文</div><div class="num">438 册在架</div></div>
      <div class="ct"><div class="ic">🎨</div><div class="n">艺术与设计</div><div class="num">276 册在架</div></div>
      <div class="ct"><div class="ic">🌱</div><div class="n">生活与自然</div><div class="num">301 册在架</div></div>
      <div class="ct"><div class="ic">🧠</div><div class="n">哲学与思想</div><div class="num">184 册在架</div></div>
      <div class="ct"><div class="ic">🌍</div><div class="n">旅行与地理</div><div class="num">153 册在架</div></div>
      <div class="ct"><div class="ic">🧸</div><div class="n">童书与绘本</div><div class="num">227 册在架</div></div>
      <div class="ct"><div class="ic">🕯️</div><div class="n">诗歌与随笔</div><div class="num">142 册在架</div></div>
    </div>
  </div>
</section>

<section id="ev">
  <div class="wrap">
    <div class="st">
      <div class="k">UPCOMING EVENTS</div>
      <h2>近 期 活 动</h2>
      <div class="dv"></div>
    </div>
    <div class="ev">
      <div class="e">
        <div class="dt"><b>09</b><span>八月 周日</span></div>
        <div class="bd">
          <h3>共读会 · 《山中来信》</h3>
          <div class="meta">19:30 – 21:00　│　二楼长桌区</div>
          <p>不需要提前读完，带着任意一章的困惑来就行。主持人会先带读三个片段，然后就是自由聊天时间。</p>
          <div class="lim">限 12 人　│　余 4 位</div>
        </div>
      </div>
      <div class="e">
        <div class="dt"><b>15</b><span>八月 周六</span></div>
        <div class="bd">
          <h3>作者见面 · 林知远</h3>
          <div class="meta">14:00 – 16:00　│　一楼主厅</div>
          <p>《旧物志》作者到店签售，现场分享写作中那些没能写进书里的调查细节，并回答现场提问。</p>
          <div class="lim">限 30 人　│　余 9 位</div>
        </div>
      </div>
      <div class="e">
        <div class="dt"><b>22</b><span>八月 周六</span></div>
        <div class="bd">
          <h3>手作工坊 · 线装笔记本</h3>
          <div class="meta">10:00 – 12:00　│　后院工作台</div>
          <p>从裁纸、打孔到穿线全程手工，两小时做出一本可以真正用来写字的册子。材料费已含在报名费中。</p>
          <div class="lim">限 10 人　│　余 2 位</div>
        </div>
      </div>
      <div class="e">
        <div class="dt"><b>30</b><span>八月 周日</span></div>
        <div class="bd">
          <h3>夜间放映 · 纪录片专场</h3>
          <div class="meta">20:00 – 22:00　│　二楼放映角</div>
          <p>本月主题「城市里的手艺人」。放映后有半小时讨论，书店提供热茶，欢迎自带零食。</p>
          <div class="lim">限 18 人　│　余 11 位</div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="sp" id="sp">
  <div class="wrap">
    <div class="st">
      <div class="k">OUR SPACE</div>
      <h2>书 店 空 间</h2>
      <div class="dv"></div>
    </div>
    <div class="sp-grid">
      <div class="spc"><div class="im s1">🪑</div><div class="tx"><h4>一楼 · 选书区</h4><p>两面通顶书墙，靠窗有四个单人座。所有书都可以拆封翻阅，不满意放回原处就好。</p></div></div>
      <div class="spc"><div class="im s2">☕</div><div class="tx"><h4>二楼 · 长桌区</h4><p>一张六米长桌，插座管够。点一杯手冲可以坐一下午，我们不赶人，也请不要外放声音。</p></div></div>
      <div class="spc"><div class="im s3">🌿</div><div class="tx"><h4>后院 · 工作台</h4><p>五平米的小院子，摆着两张木桌与几盆植物。手作活动与晴天的读书会都在这里进行。</p></div></div>
    </div>
  </div>
</section>

<section id="mb">
  <div class="wrap">
    <div class="st">
      <div class="k">MEMBERSHIP</div>
      <h2>阅 读 会 员</h2>
      <div class="dv"></div>
    </div>
    <div class="mb-grid">
      <div class="mb">
        <h3>常 客</h3>
        <div class="pr">￥99<small> / 年</small></div>
        <div class="yr">适合每月来一两次的朋友</div>
        <ul>
          <li>全场图书 9 折</li>
          <li>咖啡饮品 9 折</li>
          <li>活动优先报名</li>
          <li class="off">免费借阅</li>
          <li class="off">专属存书位</li>
        </ul>
        <a href="#">选择常客</a>
      </div>
      <div class="mb rec">
        <h3>书 友</h3>
        <div class="pr">￥299<small> / 年</small></div>
        <div class="yr">适合每周都想来坐坐的人</div>
        <ul>
          <li>全场图书 8 折</li>
          <li>咖啡饮品 8 折</li>
          <li>活动优先且免费 4 场</li>
          <li>每月免费借阅 3 册</li>
          <li class="off">专属存书位</li>
        </ul>
        <a href="#">选择书友</a>
      </div>
      <div class="mb">
        <h3>共 建 人</h3>
        <div class="pr">￥888<small> / 年</small></div>
        <div class="yr">适合愿意和我们一起养活这间店的人</div>
        <ul>
          <li>全场图书 75 折</li>
          <li>咖啡饮品免费续杯</li>
          <li>全年活动免费参加</li>
          <li>每月免费借阅 8 册</li>
          <li>二楼专属存书格一个</li>
        </ul>
        <a href="#">成为共建人</a>
      </div>
    </div>
  </div>
</section>

<section id="visit" style="background:var(--card);border-top:1px solid var(--line)">
  <div class="wrap visit">
    <div class="vmap">
      <div class="rd vr1"></div><div class="rd vr2"></div>
      <div class="pn">纸间书屋</div>
      <div class="lb" style="left:6%;top:12%">梧桐巷</div>
      <div class="lb" style="right:8%;top:56%">老城公园</div>
      <div class="lb" style="left:9%;bottom:11%">地铁 2 号线 · 文昌门站</div>
    </div>
    <div>
      <div class="st" style="text-align:left;margin-bottom:26px">
        <div class="k">VISIT US</div>
        <h2>到 店 信 息</h2>
      </div>
      <ul class="vlist">
        <li><i>📍</i><div><b>地址</b><span>老城区梧桐巷 17 号（巷口有棵大槐树，往里走 50 米）</span></div></li>
        <li><i>🕘</i><div><b>营业时间</b><span>周二至周日 10:00 – 22:00　│　周一闭店整理</span></div></li>
        <li><i>🚇</i><div><b>交通</b><span>地铁 2 号线文昌门站 C 口出，步行约 6 分钟；巷内不可停车</span></div></li>
        <li><i>📮</i><div><b>联系</b><span>0571-8899-0417　│　hello@zhijian-books.example</span></div></li>
      </ul>
    </div>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f3">
      <div>
        <h5>纸 间 书 屋</h5>
        <p>一间开在巷子里的独立书店。<br>选书、办活动、煮咖啡，以及在下雨天替路人留一把伞。</p>
      </div>
      <div><h5>关于书店</h5><ul><li>我们的选书标准</li><li>活动场地租借</li><li>图书寄售合作</li><li>加入我们</li></ul></div>
      <div><h5>关注我们</h5><ul><li>公众号 · 纸间书屋</li><li>小红书 · 纸间书屋</li><li>豆瓣小站</li><li>每周书单邮件</li></ul></div>
    </div>
    <div class="cp">© 2026 纸间书屋　本页为 HTML 模板演示，店名、书目与活动信息均为虚构</div>
  </div>
</footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

440 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
家装设计公司 HTML 单页源码（莫兰迪灰 + 橡木色，含案例 + 在线估价器 + 服务流程）
上一篇 9小时前
沉浸式剧本杀「迷雾档案馆」HTML 单页源码（深色紫黑 + 琥珀金 + 血红，含剧本列表 + 实景场馆 + 预约流程 + 价格套餐）
下一篇 5小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服