价格方案 HTML 单页源码（三栏套餐对比 + 功能表）

本源码是一款 SaaS 产品常见的「价格方案」单页模板，采用紫罗兰到靛蓝的渐变主色，科技感与高级感兼具。页面首屏以标题、一句说明与「年付立省」提示引导用户选择，三档套餐（基础版 / 专业版 / 团队版）横向并排，视觉层级清晰。

核心亮点在于「推荐套餐」的差异化处理：专业版卡片上浮并加粗描边，配「最受欢迎」角标，引导转化意图明确；每个套餐下列出关键功能清单，勾选图标统一风格；底部还附带一张功能对比表，把三档差异逐行列出，降低用户决策成本。响应式下三栏自动堆叠为单列。

适合订阅制软件、在线工具、会员制内容平台等产品展示定价。替换套餐名称、价格、功能项与按钮链接后，即可作为定价页快速上线，也方便 A/B 测试不同档位组合。

使用教程

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>云笔记 Pro · 价格方案</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root {
    --primary: #7c3aed;
    --primary2: #4f46e5;
    --ink: #1e1b2e;
    --muted: #6b6780;
    --bg: #f5f3ff;
  }
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); line-height: 1.7; }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; }
  .logo { font-weight: 800; font-size: 20px; color: var(--primary); }
  .nav a { margin-left: 24px; color: var(--ink); text-decoration: none; font-size: 15px; }
  .hero { text-align: center; padding: 64px 24px 30px; }
  .hero .badge { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #ede9fe; color: var(--primary); font-size: 13px; font-weight: 600; }
  .hero h1 { font-size: 42px; margin: 18px 0 12px; }
  .hero p { color: var(--muted); max-width: 560px; margin: 0 auto; }
  .toggle { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 28px 0 10px; }
  .toggle span { font-size: 14px; color: var(--muted); }
  .toggle .save { color: #16a34a; font-weight: 700; }
  .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 36px auto; padding: 0 24px; }
  .plan { background: #fff; border-radius: 22px; padding: 34px 28px; border: 1px solid #e9e3ff; position: relative; display: flex; flex-direction: column; }
  .plan.pop { border: 2px solid var(--primary); box-shadow: 0 20px 50px rgba(124,58,237,.18); transform: translateY(-8px); }
  .plan .tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; padding: 5px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  .plan h3 { font-size: 20px; margin-bottom: 6px; }
  .plan .desc { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
  .price { font-size: 40px; font-weight: 800; color: var(--ink); }
  .price small { font-size: 14px; color: var(--muted); font-weight: 400; }
  .plan ul { list-style: none; margin: 22px 0; flex: 1; }
  .plan li { padding: 8px 0 8px 26px; position: relative; font-size: 14px; color: #4b4760; }
  .plan li::before { content: "✓"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
  .plan .btn { display: block; text-align: center; padding: 13px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 15px; }
  .btn-ghost { background: #f3f0ff; color: var(--primary); }
  .btn-solid { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; }
  .compare { max-width: 880px; margin: 20px auto 70px; padding: 0 24px; }
  .compare h2 { text-align: center; font-size: 26px; margin-bottom: 24px; }
  .ctable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(124,58,237,.06); }
  .ctable th, .ctable td { padding: 14px 18px; text-align: left; font-size: 14px; border-bottom: 1px solid #f0ecff; }
  .ctable th { background: #faf8ff; color: var(--primary); }
  .ctable td:not(:first-child) { text-align: center; }
  footer { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }
  @media (max-width: 820px) {
    .plans { grid-template-columns: 1fr; } .plan.pop { transform: none; }
    .hero h1 { font-size: 30px; } .nav { padding: 16px 20px; }
  }
</style>
</head>
<body>
  <nav class="nav">
    <div class="logo">云笔记 Pro</div>
    <div><a href="#">功能</a><a href="#">价格</a><a href="#">帮助</a></div>
  </nav>

  <header class="hero">
    <span class="badge">PRICING · 价格方案</span>
    <h1>选一个适合你的方案</h1>
    <p>从个人记录到团队协作，云笔记 Pro 陪你把每一个灵感妥善安放。</p>
    <div class="toggle">
      <span>按月付费</span><span class="save">年付立省 20% ↓</span>
    </div>
  </header>

  <div class="plans">
    <div class="plan">
      <h3>基础版</h3>
      <div class="desc">适合个人轻量记录</div>
      <div class="price">¥0<small> / 永久免费</small></div>
      <ul>
        <li>最多 3 个笔记本</li>
        <li>单文件上传 25MB</li>
        <li>基础Markdown支持</li>
        <li>跨设备同步</li>
      </ul>
      <a href="#" class="btn btn-ghost">免费开始</a>
    </div>

    <div class="plan pop">
      <div class="tag">最受欢迎</div>
      <h3>专业版</h3>
      <div class="desc">为重度用户而生</div>
      <div class="price">¥29<small> / 月</small></div>
      <ul>
        <li>无限笔记本与标签</li>
        <li>单文件上传 2GB</li>
        <li>AI 智能整理与摘要</li>
        <li>历史版本回溯</li>
        <li>离线编辑</li>
      </ul>
      <a href="#" class="btn btn-solid">升级专业版</a>
    </div>

    <div class="plan">
      <h3>团队版</h3>
      <div class="desc">小团队协作首选</div>
      <div class="price">¥99<small> / 月</small></div>
      <ul>
        <li>包含专业版全部功能</li>
        <li>最多 20 名成员</li>
        <li>共享空间与权限管理</li>
        <li>管理员审计日志</li>
        <li>优先客服支持</li>
      </ul>
      <a href="#" class="btn btn-ghost">联系销售</a>
    </div>
  </div>

  <div class="compare">
    <h2>功能对比</h2>
    <table class="ctable">
      <tr><th>功能</th><th>基础版</th><th>专业版</th><th>团队版</th></tr>
      <tr><td>笔记本数量</td><td>3</td><td>无限</td><td>无限</td></tr>
      <tr><td>单文件上限</td><td>25MB</td><td>2GB</td><td>2GB</td></tr>
      <tr><td>AI 智能整理</td><td>—</td><td>✓</td><td>✓</td></tr>
      <tr><td>团队共享空间</td><td>—</td><td>—</td><td>✓</td></tr>
      <tr><td>历史版本</td><td>7 天</td><td>无限</td><td>无限</td></tr>
    </table>
  </div>

  <footer>© 2026 云笔记 Pro · 让记录更从容</footer>
</body>
</html>

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