静屿 Zen Isle 冥想助眠 App 落地页 HTML 单页源码

静屿 Zen Isle 是一款专注冥想与助眠的 App 落地页，面向被失眠与焦虑困扰的城市人群，主打”10 分钟入睡”的轻量放松体验。页面把产品价值浓缩成一句话——把睡眠还给自己，让用户一眼就读懂它能解决什么。

设计上以深靛蓝夜空为底色，叠加星点光斑营造睡前氛围，居中的发光月亮成为整页视觉锚点；功能介绍用半透明玻璃质感卡片，将白噪音库、引导冥想、睡眠追踪三段式清晰铺开，整体克制而治愈，没有多余装饰。

它适合失眠党、长期熬夜的职场人，以及想要建立睡前仪式感的用户。对需要白噪音助眠的敏感人群来说，这种安静、低刺激的视觉语言本身就传递了”放松”的信号，是 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>静屿 Zen Isle · 冥想助眠 App 落地页</title>
<style>
  :root{
    --indigo:#1b1f4b; --violet:#3a2f6b; --moon:#e8e6ff; --mist:#9aa0d8;
    --accent:#7c6bd6; --soft:#c9c6f0;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--indigo);color:var(--moon);line-height:1.7;overflow-x:hidden}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .stars{position:fixed;inset:0;background:
    radial-gradient(2px 2px at 20% 30%,#fff,transparent),
    radial-gradient(2px 2px at 70% 20%,#fff,transparent),
    radial-gradient(1px 1px at 40% 70%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 85% 60%,#fff,transparent),
    radial-gradient(1px 1px at 55% 45%,#fff,transparent);opacity:.5;z-index:0}
  header{position:relative;z-index:2;padding:26px 0}
  .nav{display:flex;align-items:center;justify-content:space-between}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px}
  .logo span{color:var(--soft)}
  .nav .links a{margin-left:24px;color:var(--mist);font-size:14px;transition:.2s}
  .nav .links a:hover{color:var(--moon)}
  .hero{position:relative;z-index:2;text-align:center;padding:90px 0 100px}
  .hero .tag{display:inline-block;padding:6px 16px;border:1px solid var(--accent);border-radius:30px;color:var(--soft);font-size:13px;margin-bottom:24px}
  .hero h1{font-size:50px;line-height:1.2;font-weight:800;max-width:680px;margin:0 auto}
  .hero h1 em{color:var(--soft);font-style:normal}
  .hero p{margin:22px auto 0;max-width:520px;color:var(--mist);font-size:17px}
  .cta{display:inline-flex;gap:14px;margin-top:36px}
  .btn{background:var(--accent);color:#fff;padding:14px 34px;border-radius:40px;font-weight:700;transition:.25s}
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(124,107,214,.5)}
  .btn.ghost{background:transparent;border:1px solid var(--mist);color:var(--moon)}
  .moon{width:160px;height:160px;border-radius:50%;margin:54px auto 0;background:radial-gradient(circle at 35% 30%,#fdfdff,#cfc9f5 60%,#9a93df);box-shadow:0 0 80px rgba(201,198,240,.55)}
  .feat{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:80px 0}
  .feat .c{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:32px 26px}
  .feat .c h3{color:var(--soft);font-size:19px;margin-bottom:10px}
  .feat .c p{color:var(--mist);font-size:14px}
  .quote{position:relative;z-index:2;text-align:center;padding:30px 0 100px}
  .quote blockquote{font-size:22px;max-width:600px;margin:0 auto;color:var(--moon);font-weight:300}
  .quote cite{display:block;margin-top:18px;color:var(--mist);font-size:14px;font-style:normal}
  footer{position:relative;z-index:2;text-align:center;padding:30px 0;color:var(--mist);font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
  @media(max-width:760px){.hero h1{font-size:34px}.feat{grid-template-columns:1fr}.nav .links{display:none}.moon{width:120px;height:120px}}
</style>
</head>
<body>
<div class="stars"></div>
<header><div class="wrap nav">
  <div class="logo">静屿<span>Zen Isle</span></div>
  <nav class="links"><a href="#feat">功能</a><a href="#voice">心声</a><a href="#down">下载</a></nav>
</div></header>

<section class="hero">
  <div class="wrap">
    <span class="tag">每晚陪你入睡</span>
    <h1>让喧嚣 <em>慢下来</em><br>把睡眠还给自己</h1>
    <p>静屿是一款专注冥想与助眠的 App，用自然声音、引导练习与呼吸训练，帮你在 10 分钟内卸下一天的疲惫。</p>
    <div class="cta">
      <a class="btn" href="#down">免费下载</a>
      <a class="btn ghost" href="#feat">了解更多</a>
    </div>
    <div class="moon"></div>
  </div>
</section>

<section id="feat"><div class="wrap">
  <div class="feat">
    <div class="c"><h3>白噪音库</h3><p>雨声、海浪、壁炉、森林，30+ 自然声景循环播放，覆盖入睡到深睡全周期。</p></div>
    <div class="c"><h3>引导冥想</h3><p>从 3 分钟呼吸到 30 分钟身体扫描，由专业导师录制的放松课程循序渐进。</p></div>
    <div class="c"><h3>睡眠追踪</h3><p>记录入睡时长与睡眠趋势，用温和的晨间唤醒音乐代替刺耳闹钟。</p></div>
  </div>
</div></section>

<section id="voice"><div class="wrap quote">
  <blockquote>“以前总要刷手机到半夜，现在听着海浪声十分钟就睡着了。”</blockquote>
  <cite>— 用户 @晚安小鹿</cite>
</div></section>

<section id="down"><div class="wrap quote" style="padding-top:0">
  <h2 style="font-size:30px">今夜，从此刻安静</h2>
  <p style="color:var(--mist);margin:14px 0 28px">iOS 与 Android 均可免费下载，会员可解锁全部声景。</p>
  <a class="btn" href="#">立即下载静屿</a>
</div></section>

<footer>© 2026 静屿 Zen Isle · 愿你有个好梦</footer>
</body>
</html>

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