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

栖屿瑜伽·普拉提生活馆 HTML 单页源码

小蓝IT • • 网站源码

鼠尾草绿+暖砂+米白配色的瑜伽·普拉提生活馆单页模板，含 Hero、课程、教练、套餐与预约表单，适合瑜伽馆、普拉提工作室与身心疗愈品牌使用。

栖屿瑜伽·普拉提生活馆是一款面向瑜伽馆、普拉提工作室及身心疗愈类品牌的响应式单页官网模板。页面以慢节奏的呼吸感为主调，把品牌介绍、课程体系、教练团队、会员套餐与预约表单整合在同一页内，适配手机与桌面端，帮助线下场馆用轻量方式建立线上形象。

视觉采用鼠尾草绿、暖砂、米白为主色，陶土色作为点缀，搭配圆润卡片与大量留白，营造出自然、疗愈、轻氧的空间感。结构上通过粘性导航、Hero 区块、四大课程模块、教练卡片、三档会员价格与预约表单层层递进，让访客在舒缓的节奏中了解场馆并完成体验课预约。

适合瑜伽馆、普拉提工作室、产后修复中心、冥想空间与轻健身房使用；也适合前端学习者作为健康疗愈类单页的练习案例，学习响应式网格、CSS 变量、卡片式布局与表单组件的结合方式，理解如何用低饱和配色与留白打造高级感。

栖屿瑜伽·普拉提生活馆 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>栖屿瑜伽·普拉提生活馆 | 让身体回到呼吸里</title>
<style>
  :root{
    --sage:#8aa68f; --sage-deep:#5e7a64; --sage-soft:#cdd9cf;
    --sand:#e8ddc9; --cream:#faf6ef; --clay:#c98a6b; --clay-soft:#e7c3ad;
    --ink:#3a3f3a; --muted:#8a8c84; --white:#ffffff;
    --radius:18px; --shadow:0 14px 34px rgba(58,63,58,.10);
    --maxw:1140px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
    color:var(--ink);background:var(--cream);line-height:1.75;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
  .btn{display:inline-block;padding:14px 30px;border-radius:40px;font-weight:600;font-size:15px;
    transition:.25s;cursor:pointer;border:0}
  .btn-primary{background:var(--sage-deep);color:var(--white)}
  .btn-primary:hover{background:var(--sage);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--sage-deep);border:1.5px solid var(--sage-deep)}
  .btn-ghost:hover{background:var(--sage-soft)}
  .eyebrow{letter-spacing:.28em;font-size:12px;color:var(--clay);font-weight:700;text-transform:uppercase}
  h2{font-size:32px;line-height:1.3;margin:10px 0 14px;font-weight:700}
  .lead{color:var(--muted);max-width:620px;font-size:16px}

  /* NAV */
  header.nav{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.86);
    backdrop-filter:blur(10px);border-bottom:1px solid rgba(58,63,58,.06)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
  .logo{font-size:20px;font-weight:800;letter-spacing:.04em;display:flex;align-items:center;gap:10px}
  .logo .dot{width:30px;height:30px;border-radius:50%;
    background:radial-gradient(circle at 32% 30%,var(--sage-soft),var(--sage-deep));
    display:inline-block;box-shadow:inset 0 0 0 4px var(--cream)}
  .nav nav{display:flex;gap:28px;font-size:15px;font-weight:500}
  .nav nav a:hover{color:var(--sage-deep)}
  .nav .btn{padding:10px 22px;font-size:14px}

  /* HERO */
  .hero{padding:80px 0 70px;background:
    radial-gradient(900px 460px at 85% -10%,var(--sand),transparent 60%),
    radial-gradient(700px 400px at 5% 110%,var(--sage-soft),transparent 55%)}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
  .hero h1{font-size:48px;line-height:1.18;font-weight:800;margin:16px 0 18px}
  .hero h1 .hl{color:var(--clay)}
  .hero p{font-size:17px;color:var(--muted);margin-bottom:28px}
  .hero .cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero-stats{display:flex;gap:30px;margin-top:38px}
  .hero-stats div b{display:block;font-size:28px;color:var(--sage-deep)}
  .hero-stats div span{font-size:13px;color:var(--muted)}
  .hero-card{position:relative;background:var(--white);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
  .hero-card .ring{width:120px;height:120px;border-radius:50%;margin:0 auto 18px;
    background:conic-gradient(from 220deg,var(--sage),var(--clay),var(--sand),var(--sage));
    display:flex;align-items:center;justify-content:center;animation:spin 18s linear infinite}
  .hero-card .ring::after{content:"";width:74px;height:74px;border-radius:50%;background:var(--cream)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hero-card h4{text-align:center;font-size:18px;margin-bottom:6px}
  .hero-card p{text-align:center;font-size:14px;color:var(--muted);margin:0}
  .hero-card .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
  .hero-card .tags span{font-size:12px;background:var(--sage-soft);color:var(--sage-deep);
    padding:5px 12px;border-radius:20px}

  /* SECTION */
  section{padding:72px 0}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 46px}
  .sec-head .lead{margin:0 auto}

  /* COURSES */
  .courses{background:var(--white)}
  .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .card{background:var(--cream);border-radius:var(--radius);padding:28px 24px;
    border:1px solid rgba(58,63,58,.06);transition:.25s}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .card .ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;
    justify-content:center;font-size:24px;margin-bottom:16px;background:var(--sage-soft)}
  .card h3{font-size:18px;margin-bottom:8px}
  .card p{font-size:14px;color:var(--muted)}

  /* INSTRUCTORS */
  .instructors{background:linear-gradient(180deg,var(--cream),var(--sand))}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .teacher{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  .teacher .ph{height:200px;display:flex;align-items:flex-end;justify-content:center;
    background:linear-gradient(135deg,var(--sage),var(--sage-deep))}
  .teacher .ph .av{width:96px;height:96px;border-radius:50%;background:var(--sand);
    border:5px solid var(--white);margin-bottom:-48px;display:flex;align-items:center;
    justify-content:center;font-size:34px;font-weight:800;color:var(--sage-deep)}
  .teacher .body{padding:62px 24px 28px;text-align:center}
  .teacher .body h3{font-size:19px}
  .teacher .body .role{color:var(--clay);font-size:13px;font-weight:600;margin:4px 0 12px}
  .teacher .body p{color:var(--muted);font-size:14px}

  /* PRICING */
  .pricing{background:var(--white)}
  .price{position:relative;background:var(--cream);border-radius:22px;padding:32px 26px;
    border:1px solid rgba(58,63,58,.08);text-align:center}
  .price.feature{background:var(--sage-deep);color:var(--white);border-color:transparent;
    box-shadow:var(--shadow);transform:scale(1.04)}
  .price.feature .lead,.price.feature .price-sub{color:rgba(255,255,255,.78)}
  .price .name{font-size:15px;letter-spacing:.1em;color:var(--clay);font-weight:700}
  .price.feature .name{color:var(--clay-soft)}
  .price .num{font-size:42px;font-weight:800;margin:12px 0 2px}
  .price .num small{font-size:15px;font-weight:500;color:var(--muted)}
  .price.feature .num small{color:rgba(255,255,255,.7)}
  .price-sub{font-size:13px;color:var(--muted);margin-bottom:18px}
  .price ul{list-style:none;text-align:left;margin:0 0 22px;display:inline-block}
  .price li{padding:6px 0;font-size:14px;display:flex;gap:9px;align-items:flex-start}
  .price li::before{content:"✓";color:var(--sage-deep);font-weight:700}
  .price.feature li::before{color:var(--clay-soft)}
  .price .btn{width:100%}

  /* BOOKING */
  .booking{background:radial-gradient(700px 360px at 90% 0,var(--sand),transparent 55%),var(--cream)}
  .book-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
  .book-info h2{margin-top:0}
  .info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(58,63,58,.08)}
  .info-row .k{width:42px;height:42px;border-radius:12px;background:var(--sage-soft);
    color:var(--sage-deep);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
  .info-row .v b{display:block;font-size:15px}
  .info-row .v span{font-size:13px;color:var(--muted)}
  form{background:var(--white);border-radius:22px;padding:30px;box-shadow:var(--shadow)}
  form .field{margin-bottom:16px}
  form label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink)}
  form input,form select,form textarea{width:100%;padding:12px 14px;border:1.5px solid #e3ddd1;
    border-radius:12px;font-size:14px;font-family:inherit;background:var(--cream);color:var(--ink)}
  form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--sage);
    background:var(--white)}
  form textarea{resize:vertical;min-height:84px}
  form .btn{width:100%}

  /* FOOTER */
  footer{background:var(--sage-deep);color:var(--cream);padding:46px 0 26px}
  .foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:26px}
  footer .logo{color:var(--white)}
  footer p{font-size:14px;color:rgba(255,255,255,.75);max-width:340px}
  .foot-col h4{font-size:14px;margin-bottom:12px;color:var(--clay-soft)}
  .foot-col a{display:block;font-size:14px;color:rgba(255,255,255,.8);padding:5px 0}
  .foot-col a:hover{color:var(--white)}
  .copy{text-align:center;font-size:13px;color:rgba(255,255,255,.6);
    border-top:1px solid rgba(255,255,255,.14);padding-top:18px}

  @media(max-width:900px){
    .hero-grid,.book-grid{grid-template-columns:1fr}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:1fr}
    .hero h1{font-size:36px}
    .price.feature{transform:none}
    .nav nav{display:none}
  }
  @media(max-width:520px){
    .grid-4{grid-template-columns:1fr}
    h2{font-size:26px}
  }
</style>
</head>
<body>

<header class="nav">
  <div class="wrap nav-inner">
    <div class="logo"><span class="dot"></span>栖屿 QIYU</div>
    <nav>
      <a href="#about">关于</a>
      <a href="#courses">课程</a>
      <a href="#team">教练</a>
      <a href="#pricing">套餐</a>
      <a href="#book">预约</a>
    </nav>
    <a href="#book" class="btn btn-primary">预约体验课</a>
  </div>
</header>

<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="eyebrow">YOGA &amp; PILATES STUDIO</span>
      <h1>让身体<br>回到<span class="hl">呼吸</span>里</h1>
      <p>栖屿是一间藏在城市街角的轻氧瑜伽·普拉提生活馆。我们用慢节奏的课程、温润的木色空间与一对一的陪伴，陪你把紧绷的肩颈、紊乱的呼吸，重新安放回身体本来的位置。</p>
      <div class="cta">
        <a href="#book" class="btn btn-primary">免费体验一节</a>
        <a href="#courses" class="btn btn-ghost">看看课程</a>
      </div>
      <div class="hero-stats">
        <div><b>12+</b><span>精品小班课</span></div>
        <div><b>8</b><span>资深教练</span></div>
        <div><b>3200</b><span>会员信任</span></div>
      </div>
    </div>
    <div class="hero-card">
      <div class="ring"></div>
      <h4>今日晨间流瑜伽</h4>
      <p>07:30 · 舒缓唤醒 · 限 10 人</p>
      <div class="tags">
        <span>哈他</span><span>流瑜伽</span><span>普拉提器械</span>
        <span>孕产修复</span><span>冥想</span><span>呼吸法</span>
      </div>
    </div>
  </div>
</section>

<section id="about" class="courses">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">ABOUT QIYU</span>
      <h2>把练习馆，做成一座小岛</h2>
      <p class="lead">我们相信瑜伽与普拉提不是体能考核，而是一场与身体和解的日常。栖屿用自然材质、柔光与留白，搭出一处让人愿意慢下来的地方。</p>
    </div>
    <div class="grid-4">
      <div class="card">
        <div class="ic">🌿</div>
        <h3>自然疗愈空间</h3>
        <p>原木地板、亚麻帘幕与鼠尾草绿墙面，柔光从落地窗洒入，呼吸先慢下来。</p>
      </div>
      <div class="card">
        <div class="ic">🤝</div>
        <h3>小班陪伴教学</h3>
        <p>每班不超过 12 人，教练能记住你的名字，也能看见你每一处发力的偏差。</p>
      </div>
      <div class="card">
        <div class="ic">🎯</div>
        <h3>分层进阶体系</h3>
        <p>从零基础到进阶塑形，按体态与目标分阶排课，不必担心跟不上或被忽略。</p>
      </div>
      <div class="card">
        <div class="ic">💆</div>
        <h3>课后舒缓动线</h3>
        <p>练习后可在茶歇区喝一杯花草茶，用热敷眼罩与冥想音乐完成收尾。</p>
      </div>
    </div>
  </div>
</section>

<section id="courses" class="instructors">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">OUR COURSES</span>
      <h2>四类课程，覆盖不同身体需求</h2>
      <p class="lead">无论你想放松肩颈、修复体态，还是系统塑形，都能在栖屿找到适合的那一节。</p>
    </div>
    <div class="grid-4">
      <div class="card">
        <div class="ic">🧘</div>
        <h3>团课瑜伽</h3>
        <p>哈他、流瑜伽、阴瑜伽轮换，舒展筋骨、平衡身心，适合日常放松。</p>
      </div>
      <div class="card">
        <div class="ic">🏋️</div>
        <h3>普拉提器械</h3>
        <p>核心床与重组训练器辅助，精准激活深层肌群，改善体态与线条。</p>
      </div>
      <div class="card">
        <div class="ic">👤</div>
        <h3>私教一对一</h3>
        <p>针对体态评估定制方案，孕产修复、脊柱养护、运动康复均可预约。</p>
      </div>
      <div class="card">
        <div class="ic">🌬️</div>
        <h3>冥想呼吸</h3>
        <p>睡前放松与正念呼吸课，配合颂钵与白噪音，帮焦虑的大脑关机。</p>
      </div>
    </div>
  </div>
</section>

<section id="team" class="instructors">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">MEET THE TEAM</span>
      <h2>陪你练习的人</h2>
      <p class="lead">教练均持国际认证，平均教龄 6 年以上，温柔也专业。</p>
    </div>
    <div class="grid-3">
      <div class="teacher">
        <div class="ph"><div class="av">林</div></div>
        <div class="body">
          <h3>林知夏</h3>
          <div class="role">创始教练 · 流瑜伽</div>
          <p>RYS500 认证，擅长用叙事式引导带学员进入流动状态，课程像一段温柔的冥想。</p>
        </div>
      </div>
      <div class="teacher">
        <div class="ph"><div class="av">周</div></div>
        <div class="body">
          <h3>周屿</h3>
          <div class="role">普拉提主管 · 器械</div>
          <p>STOTT 普拉提认证，专注体态矫正与核心重建，被会员称为「人形体态扫描仪」。</p>
        </div>
      </div>
      <div class="teacher">
        <div class="ph"><div class="av">苏</div></div>
        <div class="body">
          <h3>苏晚</h3>
          <div class="role">孕产修复 · 私教</div>
          <p>孕产康复专项认证，陪许多新手妈妈在安全节奏里找回身体掌控感。</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="pricing" class="pricing">
  <div class="wrap">
    <div class="sec-head">
      <span class="eyebrow">MEMBERSHIP</span>
      <h2>选一份合适的陪伴</h2>
      <p class="lead">新会员首月体验价，随时可约可停，不绑定长合约。</p>
    </div>
    <div class="grid-3">
      <div class="price">
        <div class="name">体验卡</div>
        <div class="num">¥99<small> / 月</small></div>
        <div class="price-sub">新会员首月专属</div>
        <ul>
          <li>4 节团课任选</li>
          <li>免费体测 1 次</li>
          <li>茶歇区自由使用</li>
        </ul>
        <a href="#book" class="btn btn-ghost">立即体验</a>
      </div>
      <div class="price feature">
        <div class="name">常规会员</div>
        <div class="num">¥388<small> / 月</small></div>
        <div class="price-sub">最受欢迎 · 无限团课</div>
        <ul>
          <li>团课不限次</li>
          <li>每月 2 节器械课</li>
          <li>专属储物柜</li>
          <li>好友拼卡 8 折</li>
        </ul>
        <a href="#book" class="btn btn-primary">开通会员</a>
      </div>
      <div class="price">
        <div class="name">私教包</div>
        <div class="num">¥1280<small> / 10节</small></div>
        <div class="price-sub">一对一深度陪伴</div>
        <ul>
          <li>10 节私教定制</li>
          <li>体态评估报告</li>
          <li>康复/塑形专项</li>
        </ul>
        <a href="#book" class="btn btn-ghost">咨询预约</a>
      </div>
    </div>
  </div>
</section>

<section id="book" class="booking">
  <div class="wrap book-grid">
    <div class="book-info">
      <span class="eyebrow">BOOK A CLASS</span>
      <h2>来栖屿，喘口气</h2>
      <p class="lead">留下信息，顾问会在 24 小时内与你确认体验时间。第一次来，我们请你喝杯花草茶。</p>
      <div class="info-row">
        <div class="k">📍</div>
        <div class="v"><b>馆址</b><span>城市绿洲路 18 号 · 2 层（地铁 3 号线梧桐站 B 口）</span></div>
      </div>
      <div class="info-row">
        <div class="k">🕖</div>
        <div class="v"><b>营业时间</b><span>周一至周日 07:00 – 21:30</span></div>
      </div>
      <div class="info-row">
        <div class="k">📞</div>
        <div class="v"><b>预约电话</b><span>400-808-1818 · 微信同号 qiyu_studio</span></div>
      </div>
      <div class="info-row">
        <div class="k">💬</div>
        <div class="v"><b>线上客服</b><span>工作日 09:00 – 20:00 实时答疑</span></div>
      </div>
    </div>
    <form onsubmit="return false">
      <div class="field">
        <label>你的称呼</label>
        <input type="text" placeholder="如何称呼你？">
      </div>
      <div class="field">
        <label>手机号</label>
        <input type="tel" placeholder="方便回拨的号码">
      </div>
      <div class="field">
        <label>想体验的课程</label>
        <select>
          <option>团课瑜伽（流/哈他/阴）</option>
          <option>普拉提器械</option>
          <option>私教一对一</option>
          <option>冥想呼吸课</option>
          <option>还没想好，先聊聊</option>
        </select>
      </div>
      <div class="field">
        <label>备注（可选）</label>
        <textarea placeholder="身体情况、时间偏好等，让我们更好照顾你"></textarea>
      </div>
      <button class="btn btn-primary">提交预约</button>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div>
        <div class="logo"><span class="dot"></span>栖屿 QIYU</div>
        <p>城市里的一处呼吸小岛。瑜伽、普拉提与冥想，陪你慢慢把身体安放回原本的位置。</p>
      </div>
      <div class="foot-col">
        <h4>课程</h4>
        <a href="#courses">团课瑜伽</a>
        <a href="#courses">普拉提器械</a>
        <a href="#courses">私教一对一</a>
        <a href="#courses">冥想呼吸</a>
      </div>
      <div class="foot-col">
        <h4>关于</h4>
        <a href="#about">品牌理念</a>
        <a href="#team">教练团队</a>
        <a href="#pricing">会员套餐</a>
        <a href="#book">预约到店</a>
      </div>
      <div class="foot-col">
        <h4>联系</h4>
        <a href="#book">400-808-1818</a>
        <a href="#book">qiyu_studio（微信）</a>
        <a href="#book">绿洲路 18 号 2 层</a>
      </div>
    </div>
    <div class="copy">© 2026 栖屿瑜伽·普拉提生活馆 QIYU Studio · 本页为演示模板，内容仅供学习参考</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

510 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
WSBK 法国站次回合收官：张雪机车德比斯再夺季军，本赛季第 8 次登台
上一篇 21小时前
JPR：二季度 PC 市场整体疲软，独立显卡出货量却逆势环比增长 12.2%
下一篇 21小时前

相关推荐

发表回复

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