协写 Collab 在线协作白板落地页 HTML 单页源码

这是一款面向 SaaS、团队协作工具与在线教育场景的在线白板落地页模板。整体采用深蓝紫渐变作为背景，配合半透明毛玻璃卡片和高亮渐变色按钮，第一时间传达出「实时、科技、协作」的产品气质。首屏左侧是标题、卖点与数据，右侧放置了一个正在多人协作的白板 mockup，让访客一眼就能理解产品价值。

页面在结构上采用了经典的落地页三段式：首屏卖点 → 六宫格功能亮点 → 底部 CTA 行动号召。功能模块覆盖了实时多人协作、模板组件、嵌入外链、自由绘制、权限版本与导出分享，基本覆盖了白板类 SaaS 官网需要展示的全部核心能力。响应式布局在移动端会自动堆叠为单列，保证不同设备下的阅读体验。

适合正在开发协作白板、在线文档、项目管理或教学工具的初创团队，作为产品官网首页、融资路演展示页或广告投放落地页。只需替换标题、文案、按钮链接和 mockup 中的内容，就能快速生成一个高质感的商业落地页。

使用教程

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>协写 Collab · 在线协作白板</title>
<style>
  :root{
    --bg:#0b0f1f; --bg2:#141a35; --card:#1a2142;
    --brand:#7c5cff; --brand2:#3ad1ff; --ink:#eef1ff; --muted:#9aa6d6;
    --line:rgba(255,255,255,.08); --radius:18px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:
    radial-gradient(1200px 600px at 80% -10%,rgba(124,92,255,.35),transparent 60%),
    radial-gradient(900px 500px at 0% 10%,rgba(58,209,255,.18),transparent 55%),
    var(--bg);
    color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
  header{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);
    background:rgba(11,15,31,.7);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:.5px}
  .logo .dot{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--brand),var(--brand2));
    display:grid;place-items:center;font-size:15px}
  .menu{display:flex;gap:26px;color:var(--muted);font-size:15px}
  .menu a:hover{color:var(--ink)}
  .btn{padding:11px 22px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;border:none}
  .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
    box-shadow:0 10px 30px rgba(124,92,255,.4)}
  .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
  .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:84px 0 64px}
  .tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
    background:rgba(124,92,255,.15);color:#c9bcff;font-size:13px;font-weight:600;margin-bottom:22px}
  .hero h1{font-size:48px;line-height:1.18;font-weight:800;margin-bottom:20px;letter-spacing:.5px}
  .hero h1 span{background:linear-gradient(135deg,var(--brand2),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p.lead{color:var(--muted);font-size:18px;max-width:520px;margin-bottom:32px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .stats{display:flex;gap:34px;margin-top:40px}
  .stats div b{font-size:26px;display:block}
  .stats div span{color:var(--muted);font-size:14px}
  .mock{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);position:relative;overflow:hidden}
  .mock .bar{height:34px;display:flex;gap:8px;align-items:center;margin-bottom:14px}
  .mock .bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
  .mock .bar i:nth-child(2){background:#febc2e}.mock .bar i:nth-child(3){background:#28c840}
  .mock .bar span{margin-left:auto;font-size:12px;color:var(--muted)}
  .canvas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .note{height:84px;border-radius:12px;padding:10px;font-size:12px;color:#dfe4ff;
    border:1px solid var(--line)}
  .note.a{background:linear-gradient(135deg,rgba(124,92,255,.35),rgba(124,92,255,.1))}
  .note.b{background:linear-gradient(135deg,rgba(58,209,255,.3),rgba(58,209,255,.08))}
  .note.c{background:linear-gradient(135deg,rgba(255,107,158,.3),rgba(255,107,158,.08))}
  .avatar-row{display:flex;margin-top:14px}
  .avatar-row i{width:28px;height:28px;border-radius:50%;margin-right:-8px;border:2px solid var(--card)}
  .avatar-row i:nth-child(1){background:#7c5cff}.avatar-row i:nth-child(2){background:#3ad1ff}
  .avatar-row i:nth-child(3){background:#ff6b9e}.avatar-row i:nth-child(4){background:#ffd166}
  section{padding:72px 0}
  .sec-head{text-align:center;margin-bottom:48px}
  .sec-head h2{font-size:34px;font-weight:800;margin-bottom:12px}
  .sec-head p{color:var(--muted);font-size:17px}
  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .feat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.25s}
  .feat:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.5)}
  .feat .ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;
    background:linear-gradient(135deg,var(--brand),var(--brand2));margin-bottom:18px}
  .feat h3{font-size:19px;margin-bottom:10px}
  .feat p{color:var(--muted);font-size:15px}
  .cta-band{background:linear-gradient(135deg,rgba(124,92,255,.25),rgba(58,209,255,.15));
    border:1px solid var(--line);border-radius:24px;text-align:center;padding:56px 24px;margin:0 0 72px}
  .cta-band h2{font-size:32px;margin-bottom:14px}
  .cta-band p{color:var(--muted);margin-bottom:26px;font-size:17px}
  footer{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:14px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
  @media(max-width:880px){
    .hero{grid-template-columns:1fr;padding-top:52px}
    .hero h1{font-size:36px}.features{grid-template-columns:1fr}
    .menu{display:none}.stats{gap:22px;flex-wrap:wrap}
    .canvas{grid-template-columns:repeat(2,1fr)}
  }
</style>
</head>
<body>
<header>
  <div class="wrap nav">
    <div class="logo"><span class="dot">✎</span>协写 Collab</div>
    <nav class="menu">
      <a href="#features">功能</a><a href="#scene">场景</a><a href="#price">价格</a><a href="#docs">文档</a>
    </nav>
    <button class="btn btn-primary">免费开始</button>
  </div>
</header>

<section class="wrap hero">
  <div>
    <span class="tag">● 实时协作 · 无限画布</span>
    <h1>把团队的灵感<br><span>画在同一块白板上</span></h1>
    <p class="lead">协写 Collab 是一款支持多人实时编辑的在线白板，集自由绘图、便利贴、流程图与文档嵌入于一体，让远程 brainstorm、方案评审和教学讲解都像在同一间屋子里一样自然。</p>
    <div class="cta">
      <button class="btn btn-primary">创建我的白板</button>
      <button class="btn btn-ghost">观看演示 ▷</button>
    </div>
    <div class="stats">
      <div><b>120万+</b><span>活跃团队</span></div>
      <div><b>40ms</b><span>同步延迟</span></div>
      <div><b>99.98%</b><span>服务可用</span></div>
    </div>
  </div>
  <div class="mock">
    <div class="bar"><i></i><i></i><i></i><span>产品评审 · 6 人在线</span></div>
    <div class="canvas">
      <div class="note a">用户旅程地图<br>注册 → 激活 → 留存</div>
      <div class="note b">痛点： onboarding 太长</div>
      <div class="note c">方案 A：分步引导</div>
      <div class="note b">数据看板草图</div>
      <div class="note a">OKR 对齐</div>
      <div class="note c">排期 Q3</div>
    </div>
    <div class="avatar-row"><i></i><i></i><i></i><i></i></div>
  </div>
</section>

<section class="wrap" id="features">
  <div class="sec-head"><h2>一块白板，装下所有想法</h2><p>从灵光一现到完整方案，协写帮你把过程留下来</p></div>
  <div class="features">
    <div class="feat"><div class="ic">⚡</div><h3>实时多人协作</h3><p>光标可见、编辑即时同步，支持评论与 @ 提及，告别来回传文件。</p></div>
    <div class="feat"><div class="ic">🧩</div><h3>模板与组件</h3><p>内置用户旅程、SWOT、看板、流程图等 200+ 模板，一键拖入即可复用。</p></div>
    <div class="feat"><div class="ic">🔗</div><h3>嵌入一切</h3><p>图片、网页、Figma、视频、文档都能钉在画布上，信息不再孤岛。</p></div>
    <div class="feat"><div class="ic">🎨</div><h3>自由绘制</h3><p>画笔、形状、便利贴、连线，手绘风与规整风随意切换，表达零约束。</p></div>
    <div class="feat"><div class="ic">🔒</div><h3>权限与版本</h3><p>查看/评论/编辑三级权限，历史版本随时回滚，重要决策可追溯。</p></div>
    <div class="feat"><div class="ic">📦</div><h3>导出分享</h3><p>一键导出 PNG / PDF / SVG，或生成只读链接，外部分享零门槛。</p></div>
  </div>
</section>

<section class="wrap">
  <div class="cta-band">
    <h2>今天就让团队「看见」彼此的想法</h2>
    <p>免费版支持 3 块白板、最多 5 人协作，无需信用卡。</p>
    <button class="btn btn-primary">免费创建白板</button>
  </div>
</section>

<footer class="wrap">
  <div>© 2026 协写 Collab · 让协作更直观</div>
  <div>隐私政策 · 服务条款 · 联系我们</div>
</footer>
</body>
</html>

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