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

云图帮助中心 FAQ 页面 HTML 单页源码

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

干净清爽的常见问题页模板，含分类入口、手风琴问答与搜索提示。

本源码是一款 SaaS 产品/网站的帮助中心 FAQ 单页模板，采用白底浅灰卡片搭配品牌蓝的清爽风格。页面顶部设置大标题搜索框与热门关键词，中部按「账号安全 / 订阅账单 / 产品使用 / 开发者接入」四大类展示手风琴折叠问答。

设计上使用原生的

/

标签实现无 JavaScript 的折叠展开，保证极佳的兼容性与加载速度；每个问题支持徽章标签（如「最常问」），底部分布联系客服的 CTA 条。排版上严格控制正文字号与行距，长段内容同样易于扫读。

适合互联网产品、工具型网站、在线教育平台等需要快速上线帮助文档的团队。将问题文案替换为自己的业务规则，即可接入官网使用，无需后端支持。

云图帮助中心 FAQ 页面 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>帮助中心 · 常见问题 FAQ</title>
<style>
:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --line:#e3e9f2;
  --brand:#2563eb;
  --brand-soft:#eaf1ff;
  --text:#16233a;
  --muted:#697a95;
  --ok:#0ea472;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.8;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 22px}

/* ===== 顶栏 ===== */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px}
.logo i{
  width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-style:normal;
  display:grid;place-items:center;font-size:15px;font-weight:900;
}
.nav ul{display:flex;gap:26px;list-style:none;font-size:14.5px;color:var(--muted)}
.nav ul a:hover{color:var(--brand)}
.nav .cta{padding:9px 20px;border-radius:9px;background:var(--brand);color:#fff;font-size:14px;font-weight:600}

/* ===== Hero + 搜索 ===== */
.hero{padding:64px 0 48px;text-align:center;background:linear-gradient(180deg,#fff,var(--bg))}
.hero h1{font-size:clamp(28px,4.6vw,42px);font-weight:800;margin-bottom:12px;letter-spacing:-.01em}
.hero p{color:var(--muted);font-size:16px;margin-bottom:30px}
.search{position:relative;max-width:560px;margin:0 auto}
.search input{
  width:100%;padding:16px 20px 16px 50px;border-radius:14px;border:1px solid var(--line);
  font-size:15px;background:#fff;outline:none;box-shadow:0 6px 22px rgba(22,35,58,.06);
  color:var(--text);font-family:inherit;
}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);opacity:.45}
.hot{margin-top:16px;font-size:13.5px;color:var(--muted)}
.hot a{color:var(--brand);margin:0 7px}
.hot a:hover{text-decoration:underline}

/* ===== 分类快捷入口 ===== */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:46px 0 8px}
.cat{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 18px;
  transition:.28s;cursor:pointer;
}
.cat:hover{transform:translateY(-4px);border-color:var(--brand);box-shadow:0 14px 30px rgba(37,99,235,.1)}
.cat .ic{
  width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:19px;margin-bottom:13px;
}
.cat h4{font-size:15.5px;margin-bottom:4px}
.cat span{font-size:13px;color:var(--muted)}

/* ===== FAQ 主体 ===== */
main{padding:56px 0 70px}
.sec-title{display:flex;align-items:baseline;gap:12px;margin:44px 0 18px}
.sec-title h2{font-size:21px;font-weight:800}
.sec-title span{font-size:13px;color:var(--muted)}
.sec-title:first-child{margin-top:0}

.qa{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;overflow:hidden;transition:.25s;
}
.qa[open]{border-color:#c2d5f8;box-shadow:0 10px 26px rgba(22,35,58,.07)}
.qa summary{
  list-style:none;cursor:pointer;padding:19px 54px 19px 22px;font-size:15.5px;font-weight:600;
  position:relative;transition:.2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--brand)}
.qa summary::after{
  content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:.28s;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--brand)}
.qa .ans{padding:0 22px 22px;color:var(--muted);font-size:14.5px;border-top:1px solid var(--line);margin-top:-1px;padding-top:18px}
.qa .ans p+p{margin-top:10px}
.qa .ans code{background:#f0f4fa;padding:2px 7px;border-radius:5px;font-size:13px;color:#c0392b;font-family:Consolas,Monaco,monospace}
.qa .ans ul{margin:10px 0 0 20px}
.qa .ans li{margin-bottom:5px}
.badge{
  display:inline-block;font-size:11px;padding:2px 9px;border-radius:99px;margin-left:9px;
  background:#e6f8f1;color:var(--ok);font-weight:600;vertical-align:middle;
}

/* ===== 联系卡片 ===== */
.contact{
  margin-top:56px;background:linear-gradient(120deg,#1d3a7a,var(--brand));border-radius:20px;
  padding:44px 36px;color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.contact h3{font-size:23px;margin-bottom:7px}
.contact p{opacity:.85;font-size:14.5px}
.contact .btns{display:flex;gap:12px;flex-wrap:wrap}
.contact .b1,.contact .b2{padding:12px 26px;border-radius:10px;font-size:14.5px;font-weight:600;transition:.25s}
.contact .b1{background:#fff;color:var(--brand)}
.contact .b2{border:1px solid rgba(255,255,255,.5)}
.contact .b1:hover{transform:translateY(-2px)}
.contact .b2:hover{background:rgba(255,255,255,.14)}

footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--muted);font-size:13.5px;background:var(--card)}

@media(max-width:640px){
  .nav ul{display:none}
  .hero{padding:44px 0 34px}
  .contact{flex-direction:column;text-align:center;padding:34px 22px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><i>云</i>云图 CloudMap</div>
    <ul>
      <li><a href="#">产品</a></li>
      <li><a href="#">文档</a></li>
      <li><a href="#">价格</a></li>
      <li><a href="#">帮助中心</a></li>
    </ul>
    <a href="#" class="cta">登录控制台</a>
  </div>
</header>

<div class="hero">
  <div class="wrap">
    <h1>有什么可以帮您？</h1>
    <p>在下方搜索关键词，或浏览按主题分类的常见问题</p>
    <div class="search">
      <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
      <input type="text" placeholder="例如：如何修改绑定手机号 / 发票怎么开">
    </div>
    <div class="hot">热门搜索：<a href="#">忘记密码</a><a href="#">套餐升级</a><a href="#">API 限流</a><a href="#">退款政策</a></div>
  </div>
</div>

<div class="wrap">
  <div class="cats">
    <div class="cat"><div class="ic">◈</div><h4>账号与安全</h4><span>注册 · 登录 · 实名</span></div>
    <div class="cat"><div class="ic">◎</div><h4>订阅与账单</h4><span>套餐 · 发票 · 退款</span></div>
    <div class="cat"><div class="ic">◇</div><h4>产品使用</h4><span>功能 · 配置 · 限制</span></div>
    <div class="cat"><div class="ic">✦</div><h4>开发者接入</h4><span>API · SDK · Webhook</span></div>
  </div>
</div>

<main>
  <div class="wrap">

    <div class="sec-title"><h2>账号与安全</h2><span>4 个问题</span></div>

    <details class="qa" open>
      <summary>忘记密码了，如何重置？<span class="badge">最常问</span></summary>
      <div class="ans">
        <p>在登录页点击「忘记密码」，输入注册邮箱或手机号，系统会发送 6 位验证码。验证通过后即可设置新密码。</p>
        <p>若您绑定的邮箱已停用且手机号也无法接收短信，请携带实名信息通过工单联系客服人工核验，通常 1 个工作日内处理完毕。</p>
      </div>
    </details>

    <details class="qa">
      <summary>如何开启二次验证（2FA）？</summary>
      <div class="ans">
        <p>进入「控制台 → 账号设置 → 安全中心」，点击「绑定验证器」，使用 Google Authenticator、微软 Authenticator 或 1Password 扫描二维码即可。</p>
        <ul>
          <li>绑定成功后请务必保存 10 个一次性恢复码</li>
          <li>更换手机前请先在旧设备上解绑</li>
          <li>企业版账号可由管理员强制全员开启</li>
        </ul>
      </div>
    </details>

    <details class="qa">
      <summary>一个账号可以在几台设备同时登录？</summary>
      <div class="ans">
        <p>个人版最多 3 台设备同时在线，团队版 10 台，企业版不限。超出后最早登录的会话会被自动挤下线。</p>
        <p>您可以在「安全中心 → 登录设备」中查看所有在线会话，并对陌生设备执行远程下线。</p>
      </div>
    </details>

    <details class="qa">
      <summary>如何注销账号？数据会被删除吗？</summary>
      <div class="ans">
        <p>在「账号设置 → 账号注销」中提交申请。注销请求提交后有 15 天冷静期，期间随时可撤销。</p>
        <p>冷静期结束后，所有个人数据、项目文件与操作日志将被永久删除且不可恢复，请务必提前导出备份。</p>
      </div>
    </details>

    <div class="sec-title"><h2>订阅与账单</h2><span>3 个问题</span></div>

    <details class="qa">
      <summary>支持哪些付款方式？可以开发票吗？</summary>
      <div class="ans">
        <p>目前支持微信支付、支付宝、银联信用卡以及对公转账（仅年付）。所有订单均可开具电子普通发票或增值税专用发票。</p>
        <p>发票申请入口在「账单中心 → 我的订单 → 申请开票」，电子普票即时开具，专票需 3–5 个工作日审核。</p>
      </div>
    </details>

    <details class="qa">
      <summary>套餐升级后差价怎么算？</summary>
      <div class="ans">
        <p>采用按日折算的差价补缴模式：<code>应付 = (新套餐日单价 − 旧套餐日单价) × 剩余天数</code>。升级立即生效，不会重置计费周期。</p>
        <p>降级则在当前周期结束后生效，已支付费用不作退还，但会以余额形式抵扣下个周期。</p>
      </div>
    </details>

    <details class="qa">
      <summary>可以申请退款吗？</summary>
      <div class="ans">
        <p>首次订阅在 7 天内且用量低于套餐额度 20% 的，可申请全额退款。超出该范围按未使用天数比例退还。</p>
        <p>促销活动、优惠券兑换及年付赠送月份不参与退款计算。</p>
      </div>
    </details>

    <div class="sec-title"><h2>开发者接入</h2><span>3 个问题</span></div>

    <details class="qa">
      <summary>API 的调用频率限制是多少？</summary>
      <div class="ans">
        <p>免费版 60 次/分钟，个人版 600 次/分钟，团队版 3000 次/分钟。触发限流会返回 HTTP <code>429</code>，响应头中包含 <code>X-RateLimit-Reset</code> 提示恢复时间。</p>
        <p>建议客户端实现指数退避重试，初始间隔 1 秒，最多重试 5 次。</p>
      </div>
    </details>

    <details class="qa">
      <summary>Webhook 推送失败会重试吗？</summary>
      <div class="ans">
        <p>会。若您的接收端未在 10 秒内返回 <code>2xx</code>，系统将按 1min / 5min / 30min / 2h / 12h 的间隔重试 5 次。</p>
        <p>连续 24 小时全部失败的 Webhook 会被自动暂停，需在控制台手动恢复。</p>
      </div>
    </details>

    <details class="qa">
      <summary>提供哪些语言的官方 SDK？</summary>
      <div class="ans">
        <p>目前官方维护 JavaScript / TypeScript、Python、Go、Java、PHP 五种 SDK，均已发布至各自的主流包管理仓库。</p>
        <ul>
          <li>Node：<code>npm i @cloudmap/sdk</code></li>
          <li>Python：<code>pip install cloudmap</code></li>
          <li>Go：<code>go get github.com/cloudmap/go-sdk</code></li>
        </ul>
      </div>
    </details>

    <div class="contact">
      <div>
        <h3>没有找到答案？</h3>
        <p>我们的支持团队工作日 9:00–21:00 在线，平均首次响应时间 12 分钟。</p>
      </div>
      <div class="btns">
        <a href="#" class="b1">提交工单</a>
        <a href="#" class="b2">在线客服</a>
      </div>
    </div>

  </div>
</main>

<footer>
  <div class="wrap">© 2026 云图 CloudMap · 帮助中心 · 本页面为演示模板</div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

394 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
星河之夜科技峰会邀请函 HTML 单页源码
上一篇 9小时前
Aurora One 耳机产品展示页 HTML 单页源码
下一篇 9小时前

相关推荐

发表回复

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