共读会线上读书社群主页 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{
    --bg:#fbf4ec; --card:#ffffff; --orange:#e8743b; --green:#2f6b54; --ink:#2e2a26;
    --muted:#897f73; --line:rgba(46,42,38,.1); --radius:16px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:var(--bg);
    color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px}
  .logo .bk{width:36px;height:36px;border-radius:10px;background:var(--green);color:#fff;
    display:grid;place-items:center;font-size:18px}
  .menu a{margin-left:24px;color:var(--muted);font-size:15px;transition:.2s}
  .menu a:hover{color:var(--orange)}
  .join{background:var(--orange);color:#fff;border:none;padding:10px 22px;border-radius:11px;font-weight:700;cursor:pointer}
  .hero{padding:64px 0 40px;text-align:center;background:
    radial-gradient(700px 320px at 50% 0%,rgba(232,116,59,.16),transparent);
    border-radius:0 0 28px 28px}
  .hero .tag{display:inline-block;background:rgba(47,107,84,.12);color:var(--green);font-size:13px;
    font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:18px}
  .hero h1{font-size:44px;font-weight:800;margin-bottom:16px}
  .hero h1 span{color:var(--orange)}
  .hero p{color:var(--muted);font-size:17px;max-width:520px;margin:0 auto 28px}
  .books{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:46px 0}
  .book{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:.25s}
  .book:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(46,42,38,.12)}
  .book .cover{aspect-ratio:3/4;border-radius:10px;margin-bottom:16px;display:grid;place-items:center;
    color:#fff;font-size:15px;letter-spacing:2px;text-align:center;padding:14px}
  .book:nth-child(1) .cover{background:linear-gradient(160deg,#e8743b,#c8531f)}
  .book:nth-child(2) .cover{background:linear-gradient(160deg,#2f6b54,#1f4a3a)}
  .book:nth-child(3) .cover{background:linear-gradient(160deg,#d9a441,#b07c1f)}
  .book h3{font-size:18px;margin-bottom:4px}.book .au{color:var(--muted);font-size:14px;margin-bottom:10px}
  .book p{color:var(--muted);font-size:14px}
  .calendar{display:grid;grid-template-columns:1.3fr .7fr;gap:30px;padding:30px 0 70px;align-items:start}
  .panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
  .panel h2{font-size:24px;margin-bottom:18px}
  .ev{display:flex;gap:16px;padding:14px 0;border-bottom:1px dashed var(--line)}
  .ev:last-child{border-bottom:none}
  .ev .date{flex:0 0 56px;text-align:center;background:var(--green);color:#fff;border-radius:12px;padding:8px 0;height:fit-content}
  .ev .date b{display:block;font-size:20px}.ev .date span{font-size:11px;opacity:.85}
  .ev .body h4{font-size:16px;margin-bottom:3px}.ev .body p{color:var(--muted);font-size:14px}
  .side{background:linear-gradient(160deg,var(--orange),#c8531f);color:#fff;border-radius:20px;padding:28px;text-align:center}
  .side h3{font-size:22px;margin-bottom:10px}.side p{opacity:.9;font-size:15px;margin-bottom:20px}
  .side button{background:#fff;color:var(--orange);border:none;padding:12px 26px;border-radius:11px;font-weight:700;cursor:pointer}
  footer{text-align:center;padding:34px 0;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
  @media(max-width:880px){.books{grid-template-columns:1fr 1fr}.calendar{grid-template-columns:1fr}
    .hero h1{font-size:34px}.menu{display:none}}
  @media(max-width:540px){.books{grid-template-columns:1fr}}
</style>
</head>
<body>
<header class="wrap">
  <div class="logo"><span class="bk">📖</span>共读会</div>
  <nav class="menu"><a href="#books">书单</a><a href="#events">活动</a><a href="#about">关于</a></nav>
  <button class="join">加入社群</button>
</header>

<section class="wrap hero">
  <span class="tag">每月共读一本书 · 已有 1.2 万书友</span>
  <h1>一个人读得快，<span>一群人读得深</span></h1>
  <p>共读会是一个线上读书社群。每月选定一本书，配套领读直播、笔记共写与话题讨论，让阅读不再是一个人的孤独旅程。</p>
  <button class="join">免费加入本月共读</button>
</section>

<section class="wrap books" id="books">
  <article class="book"><div class="cover">被讨厌的<br>勇气</div><h3>被讨厌的勇气</h3><div class="au">岸见一郎 / 古贺史健</div><p>用对话体讲透阿德勒心理学，关于自我、关系与自由的思考。</p></article>
  <article class="book"><div class="cover">人类简史</div><h3>人类简史</h3><div class="au">尤瓦尔·赫拉利</div><p>从认知革命到科学革命，重新审视我们何以成为今天的我们。</p></article>
  <article class="book"><div class="cover">活着</div><h3>活着</h3><div class="au">余华</div><p>一个普通人在时代洪流里的坚韧，关于生命最朴素的答案。</p></article>
</section>

<section class="wrap calendar" id="events">
  <div class="panel">
    <h2>近期活动</h2>
    <div class="ev"><div class="date"><b>12</b><span>周六</span></div><div class="body"><h4>《活着》领读直播</h4><p>晚 20:00，主讲人阿树，聊苦难叙事里的温柔。</p></div></div>
    <div class="ev"><div class="date"><b>18</b><span>周五</span></div><div class="body"><h4>月度书单投票</h4><p>下午 19:30，群内投票决定下月共读书目。</p></div></div>
    <div class="ev"><div class="date"><b>25</b><span>周五</span></div><div class="body"><h4>笔记共写夜</h4><p>晚 21:00，一起写读书卡片，互相点评。</p></div></div>
    <div class="ev"><div class="date"><b>02</b><span>周六</span></div><div class="body"><h4>新书启动会</h4><p>下月共读书目揭晓，分组认领共读角色。</p></div></div>
  </div>
  <aside class="side">
    <h3>本周共读进度</h3>
    <p>《活着》已读至第 6 章，参与打卡 3,140 人次。来补上你的笔记吧。</p>
    <button>去打卡 →</button>
  </aside>
</section>

<footer id="about">© 2026 共读会 BookTogether · 让阅读发生连接</footer>
</body>
</html>

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