产品落地页 HTML 单页源码（Hero + 特性 + 邮箱订阅）

本源码是一款典型的产品营销「落地页」单页模板，采用红橙活力渐变，热情、有冲劲，非常适合高频消费类 App 或新品的推广投放。首屏为全幅渐变 Hero 区，含产品口号、核心卖点与双行动按钮（立即开始 / 看看怎么用），视觉冲击力极强。

页面结构完整覆盖转化路径：三项功能特性卡片用图标 + 标题 + 描述快速建立价值认知；口碑区以用户量、评分、坚持率三项数据增强可信度；底部再次用标题 + 邮箱订阅表单收口，形成「认知 → 信任 → 行动」的闭环。导航栏在 Hero 上做反白处理，移动端自动收起为简洁布局。

适合 App 推广、活动页、新品预售、邮件订阅引流等场景。替换文案、数据与表单提交地址后，即可作为广告落地页或社媒引流页快速上线。

使用教程

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>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  :root { --r1: #ff5e62; --r2: #ff9966; --ink: #2a1a12; --muted: #7a5a4d; }
  body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); line-height: 1.7; }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
  .logo { font-weight: 800; font-size: 20px; color: #fff; }
  .nav a { margin-left: 22px; color: #fff; text-decoration: none; font-size: 15px; opacity: .92; }
  .nav .cta-btn { background: #fff; color: var(--r1); padding: 9px 20px; border-radius: 999px; font-weight: 700; }
  .hero { background: linear-gradient(135deg, var(--r1), var(--r2)); color: #fff; padding: 150px 24px 110px; text-align: center; }
  .hero .pill { display: inline-block; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 13px; font-weight: 600; margin-bottom: 22px; }
  .hero h1 { font-size: 50px; line-height: 1.2; margin-bottom: 18px; max-width: 760px; margin-left: auto; margin-right: auto; }
  .hero p { max-width: 560px; margin: 0 auto 32px; font-size: 18px; opacity: .95; }
  .hero .acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .hero .acts a { padding: 14px 34px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 16px; }
  .acts .solid { background: #fff; color: var(--r1); }
  .acts .ghost { border: 2px solid rgba(255,255,255,.6); color: #fff; }
  .feats { max-width: 1080px; margin: 80px auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
  .feat { text-align: center; padding: 30px 22px; border-radius: 20px; background: #fff7f3; }
  .feat .ic { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 18px; background: linear-gradient(135deg, var(--r1), var(--r2)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
  .feat h3 { font-size: 19px; margin-bottom: 10px; }
  .feat p { color: var(--muted); font-size: 15px; }
  .proof { text-align: center; padding: 50px 24px; background: #fff0ea; }
  .proof .nums { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; margin-top: 24px; }
  .proof .nums b { display: block; font-size: 40px; color: var(--r1); }
  .proof .nums span { color: var(--muted); font-size: 14px; }
  .final { text-align: center; padding: 80px 24px; }
  .final h2 { font-size: 34px; margin-bottom: 14px; }
  .final p { color: var(--muted); margin-bottom: 26px; }
  .final form { display: flex; gap: 10px; justify-content: center; max-width: 460px; margin: 0 auto; flex-wrap: wrap; }
  .final input { flex: 1; min-width: 220px; padding: 13px 16px; border-radius: 12px; border: 1px solid #f0c9bb; font-size: 15px; }
  .final button { padding: 13px 28px; border: none; border-radius: 12px; background: linear-gradient(135deg, var(--r1), var(--r2)); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
  footer { text-align: center; padding: 30px; color: var(--muted); font-size: 14px; }
  @media (max-width: 820px) {
    .feats { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } .nav { padding: 16px 20px; } .proof .nums { gap: 32px; }
  }
</style>
</head>
<body>
  <nav class="nav">
    <div class="logo">晨光早起</div>
    <div>
      <a href="#feats">功能</a><a href="#proof">口碑</a>
      <a href="#join" class="cta-btn">免费体验</a>
    </div>
  </nav>

  <header class="hero">
    <span class="pill">🌅 已有 80 万人加入</span>
    <h1>21 天，把早起变成你最享受的事</h1>
    <p>晨光早起用科学的节奏表与温柔的提醒，帮你告别熬夜，找回属于自己的清晨时光。</p>
    <div class="acts">
      <a href="#join" class="solid">立即免费开始</a>
      <a href="#feats" class="ghost">看看怎么用</a>
    </div>
  </header>

  <section class="feats" id="feats">
    <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>加入同城早起小队，清晨打卡互相点赞，一个人也能坚持到底。</p></div>
  </section>

  <section class="proof" id="proof">
    <h2>大家怎么说</h2>
    <div class="nums">
      <div><b>80万+</b><span>活跃用户</span></div>
      <div><b>4.9</b><span>应用商店评分</span></div>
      <div><b>73%</b><span>21天坚持率</span></div>
    </div>
  </section>

  <section class="final" id="join">
    <h2>明天，从一场好觉开始</h2>
    <p>留下邮箱，我们送你一份《晨间仪式清单》电子书。</p>
    <form onsubmit="return false;">
      <input type="email" placeholder="你的邮箱地址">
      <button>免费领取</button>
    </form>
  </section>

  <footer>© 2026 晨光早起 · 让每一个清晨都值得期待</footer>
</body>
</html>

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