栖瑜伽 QI YOGA 瑜伽冥想生活馆 HTML 单页源码

这是一款为瑜伽馆、冥想空间或身心健康工作室设计的单页官网模板。整体以雾紫、暖沙与鼠尾草绿为主色，配合柔和大圆角、暖光渐变与大量留白，营造出「安静、放松、疗愈」的氛围，让访客在浏览时就能慢下来。首屏右侧用渐变圆形块模拟练习者剪影，克制而温暖。

页面结构贴合到店转化：四类课程（哈他 / 流瑜伽 / 冥想 / 空中）用图标卡片呈现；教练段以头像占位 + 资质标签建立信任；会员卡段提供次卡 / 月卡 / 年卡三档，月卡高亮推荐。配色与圆角在所有区块保持一致，移动端单列堆叠，阅读体验舒适。

非常适合瑜伽馆、普拉提工作室、冥想 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>栖瑜伽 QI YOGA · 瑜伽冥想生活馆</title>
<style>
  :root{
    --bg:#f3eee6; --bg2:#ece4d8; --card:#fffdf9; --line:#e0d5c4;
    --purple:#9b8bb0; --sand:#e8d8c3; --sage:#9caf88; --txt:#4a443c; --mut:#8a8073;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Songti SC","Noto Serif SC",system-ui,"PingFang SC",sans-serif;background:var(--bg);color:var(--txt);line-height:1.8}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  header{background:rgba(243,238,230,.85);backdrop-filter:blur(8px);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{font-size:22px;letter-spacing:4px;color:var(--purple)}
  .logo b{color:var(--txt)}
  .nav a{color:var(--mut);margin-left:26px;font-size:15px}
  .nav a:hover{color:var(--sage)}
  .hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:84px 0 72px}
  .hero .tag{color:var(--sage);letter-spacing:4px;font-size:13px}
  .hero h1{font-size:48px;line-height:1.25;margin:12px 0;letter-spacing:2px}
  .hero h1 span{color:var(--purple)}
  .hero p{color:var(--mut);font-size:16.5px;margin-bottom:28px;max-width:480px}
  .btn{display:inline-block;background:var(--sage);color:#fff;padding:13px 34px;border-radius:30px;font-weight:600;letter-spacing:1px}
  .btn.ghost{background:transparent;border:1px solid var(--purple);color:var(--purple);margin-left:12px}
  .visual{aspect-ratio:1/1;border-radius:24px;background:
    radial-gradient(circle at 30% 30%,rgba(155,139,176,.5),transparent 55%),
    radial-gradient(circle at 75% 70%,rgba(156,175,136,.5),transparent 55%),
    linear-gradient(160deg,var(--sand),#f1e7d8);box-shadow:0 26px 60px rgba(120,108,90,.18);position:relative}
  .visual::after{content:"🧘";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;opacity:.85}
  section{padding:72px 0}
  .tag{color:var(--sage);letter-spacing:4px;font-size:13px;text-align:center}
  h2{font-size:32px;text-align:center;letter-spacing:2px;margin:8px 0 12px}
  .lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto;font-family:system-ui,"PingFang SC",sans-serif}
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
  .c{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 20px;text-align:center}
  .c .ic{font-size:34px;margin-bottom:10px}
  .c h3{color:var(--purple);font-size:18px;letter-spacing:1px}
  .c p{color:var(--mut);font-size:13.5px;font-family:system-ui,"PingFang SC",sans-serif;margin-top:6px}
  .coach{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
  .coach .c{text-align:left}
  .coach .c .av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--sand));margin-bottom:14px}
  .coach .c .role{color:var(--sage);font-size:13px;font-family:system-ui,sans-serif}
  .price{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
  .price .c{text-align:center;padding:30px 22px}
  .price .c.hot{border:2px solid var(--sage);box-shadow:0 16px 40px rgba(156,175,136,.2)}
  .price .c .num{color:var(--purple);font-size:30px;font-weight:700;font-family:system-ui,sans-serif}
  .price .c h3{margin:6px 0 12px}
  .price .c ul{list-style:none;color:var(--mut);font-size:13.5px;font-family:system-ui,"PingFang SC",sans-serif}
  .price .c li{padding:5px 0;border-bottom:1px dashed var(--line)}
  .cta{text-align:center;background:linear-gradient(160deg,var(--sand),var(--bg2));border-top:1px solid var(--line)}
  footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--mut);font-size:13px;font-family:system-ui,"PingFang SC",sans-serif}
  @media(max-width:860px){.hero{grid-template-columns:1fr;padding:52px 0}.hero h1{font-size:36px}.visual{max-width:300px;margin:0 auto}.grid,.coach,.price{grid-template-columns:1fr}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">栖瑜伽 <b>QI YOGA</b></div>
  <nav><a href="#class">课程</a><a href="#coach">教练</a><a href="#price">会员</a><a href="#book">预约</a></nav>
</div></header>

<section class="hero"><div class="wrap" style="display:contents">
  <div>
    <div class="tag">BREATHE · MOVE · REST</div>
    <h1>在城市的缝隙里，<br>给自己一段<span>慢下来</span>的时间</h1>
    <p>栖瑜伽是一间社区里的瑜伽冥想生活馆。暖光、原木与绿植环绕，从哈他到冥想，陪你找回身体的节奏与呼吸的安宁。</p>
    <a class="btn" href="#book">预约体验课</a><a class="btn ghost" href="#class">查看课程</a>
  </div>
  <div class="visual"></div>
</div></section>

<section id="class"><div class="wrap">
  <div class="tag">CLASSES</div>
  <h2>四类课程，安抚身心</h2>
  <p class="lead">无论你是零基础还是资深练习者，都能找到合适的节奏。</p>
  <div class="grid">
    <div class="c"><div class="ic">🌿</div><h3>哈他瑜伽</h3><p>基础体式与正位，新手建立力量与柔韧的第一步。</p></div>
    <div class="c"><div class="ic">🌊</div><h3>流瑜伽</h3><p>呼吸串联动作，在流动中释放压力、提升专注。</p></div>
    <div class="c"><div class="ic">🕯️</div><h3>正念冥想</h3><p>引导式呼吸与身体扫描，给大脑一个关机重启。</p></div>
    <div class="c"><div class="ic">🪢</div><h3>空中瑜伽</h3><p>吊床支撑的倒挂与舒展，解锁脊柱新体验。</p></div>
  </div>
</div></section>

<section id="coach" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">TEACHERS</div>
  <h2>陪伴你的教练</h2>
  <div class="coach">
    <div class="c"><div class="av"></div><div class="role">主教 · RYT500</div><h3>林溪</h3><p>八年哈他教学经验，擅长为久坐族定制舒缓序列。</p></div>
    <div class="c"><div class="av"></div><div class="role">冥想导师</div><h3>安然</h3><p>正念减压引导者，陪你用呼吸安放焦虑。</p></div>
    <div class="c"><div class="av"></div><div class="role">空中瑜伽</div><h3>小鹿</h3><p>舞蹈背景，把力量与美感编进每一节空中课。</p></div>
  </div>
</div></section>

<section id="price"><div class="wrap">
  <div class="tag">MEMBERSHIP</div>
  <h2>三档会员卡</h2>
  <div class="price">
    <div class="c"><div class="num">¥99</div><h3>次卡</h3><ul><li>单节体验</li><li>含瑜伽垫租赁</li><li>新客专享</li></ul></div>
    <div class="c hot"><div class="num">¥599</div><h3>月卡</h3><ul><li>不限次常规课</li><li>免费储物柜</li><li>赠 1 节冥想</li></ul></div>
    <div class="c"><div class="num">¥4999</div><h3>年卡</h3><ul><li>全年畅练</li><li>专属健康档案</li><li>好友同行 5 折</li></ul></div>
  </div>
</div></section>

<section class="cta" id="book"><div class="wrap">
  <div class="tag">JOIN US</div>
  <h2>今天，就从一次呼吸开始</h2>
  <p class="lead" style="margin:0 auto 26px">首节体验课 ¥99，含前后对比与练习建议。门店近地铁 2 号线，营业 7:00–21:30。</p>
  <a class="btn" href="#">预约体验课</a>
</div></section>

<footer>© 2026 栖瑜伽 QI YOGA · 慢一点，才能走得更远</footer>
</body>
</html>

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