本源码是一款面向力量训练、体能工作室的「品牌与课程展示」单页模板，采用深色背景搭配荧光绿强调色，视觉风格硬朗、克制、有冲击力，非常符合健身行业的气质。首屏用大胆标题直接传递「不喊口号，只看练完的样子」的品牌态度，数据条展示团课上限、场地面积、教练数量与续卡率，快速建立专业信任。
设计亮点集中在信息密度与转化路径：课程表区用标签区分力量、体能与恢复类课程，剩余名额清晰可见；教练团队区用渐变色头像块展示教练专长；会籍方案区提供次卡、季卡、私教包三种选择，「季卡」通过上浮卡片与「最划算」角标突出推荐。全页使用统一的卡片、边框与强调色体系，纯 CSS 实现，无外部依赖。
适合健身房、瑜伽馆、CrossFit 馆、私教工作室用于展示课程、教练与价格。替换课程时间、教练介绍与价格后，即可作为官网核心页面使用，也可作为预约转化的落地页。
使用教程
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>PULSE 力量工作室 · 课程与私教</title>
<style>
:root{
--bg:#0d0f12;
--panel:#15181d;
--panel2:#1c2027;
--lime:#c8ff2e;
--lime-dim:#9ecf16;
--text:#f2f4f6;
--muted:#8d949e;
--line:#262b33;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
a{text-decoration:none;color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(13,15,18,.92);backdrop-filter:blur(12px);z-index:60}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:22px;font-weight:900;letter-spacing:3px}
.brand i{font-style:normal;color:var(--lime)}
.nav ul{display:flex;gap:32px;list-style:none;font-size:14.5px;color:var(--muted);letter-spacing:1px}
.nav ul a:hover{color:var(--lime)}
.cta{background:var(--lime);color:#0d0f12;font-weight:800;padding:11px 22px;border-radius:8px;font-size:14.5px;transition:.2s}
.cta:hover{background:#dcff6b;transform:translateY(-2px)}
/* HERO */
.hero{padding:86px 0 64px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-140px;top:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(200,255,46,.16),transparent 62%);pointer-events:none}
.kicker{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--lime-dim);color:var(--lime);font-size:12.5px;letter-spacing:2px;font-weight:700;padding:6px 14px;border-radius:999px;margin-bottom:24px}
.hero h1{font-size:64px;line-height:1.08;font-weight:900;letter-spacing:-1px;margin-bottom:22px}
.hero h1 span{color:var(--lime)}
.hero p{color:var(--muted);font-size:17px;max-width:520px;margin-bottom:34px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px}
.btn2{border:1px solid var(--line);padding:11px 22px;border-radius:8px;font-size:14.5px;font-weight:700;transition:.2s}
.btn2:hover{border-color:var(--lime);color:var(--lime)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.metric{background:var(--panel);padding:26px 20px}
.metric b{display:block;font-size:34px;font-weight:900;color:var(--lime);line-height:1.1}
.metric span{font-size:12.5px;color:var(--muted);letter-spacing:1px}
section{padding:66px 0}
.head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:34px;gap:20px;flex-wrap:wrap}
.head h2{font-size:34px;font-weight:900;letter-spacing:-.5px}
.head p{color:var(--muted);font-size:15px;margin-top:6px}
/* 课程表 */
.table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
.table th{background:var(--panel2);text-align:left;padding:16px 18px;font-size:13px;letter-spacing:2px;color:var(--muted);font-weight:700}
.table td{padding:17px 18px;border-top:1px solid var(--line)}
.table tr:hover td{background:#191d23}
.tag{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px;letter-spacing:1px}
.t-hiit{background:rgba(255,92,92,.15);color:#ff7a7a}
.t-str{background:rgba(200,255,46,.15);color:var(--lime)}
.t-yoga{background:rgba(122,182,255,.15);color:#7ab6ff}
.slots{color:var(--muted);font-size:13.5px}
/* 教练 */
.coaches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.coach{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.coach:hover{border-color:var(--lime-dim);transform:translateY(-5px)}
.avatar{height:150px;display:flex;align-items:center;justify-content:center;font-size:60px}
.c1{background:linear-gradient(135deg,#2b3a12,#4d6a1c)}
.c2{background:linear-gradient(135deg,#1d2c3d,#2f4f70)}
.c3{background:linear-gradient(135deg,#3a2030,#63344f)}
.coach .body{padding:20px}
.coach h3{font-size:18px;font-weight:800;margin-bottom:4px}
.coach .role{color:var(--lime);font-size:13px;letter-spacing:1px;margin-bottom:10px}
.coach p{color:var(--muted);font-size:14px}
/* 会籍卡 */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 26px;display:flex;flex-direction:column}
.plan.hot{border-color:var(--lime);background:linear-gradient(180deg,#1b2110,var(--panel) 45%);position:relative}
.plan.hot::after{content:"最划算";position:absolute;top:18px;right:18px;background:var(--lime);color:#0d0f12;font-size:11.5px;font-weight:900;padding:4px 10px;border-radius:6px;letter-spacing:1px}
.plan h3{font-size:17px;letter-spacing:2px;color:var(--muted);font-weight:700}
.price{font-size:44px;font-weight:900;margin:12px 0 4px}
.price small{font-size:15px;color:var(--muted);font-weight:600}
.plan ul{list-style:none;margin:20px 0 26px;display:grid;gap:11px;font-size:14.5px;color:#cfd4da}
.plan li::before{content:"✓ ";color:var(--lime);font-weight:900}
.plan .cta,.plan .btn2{text-align:center;display:block}
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
@media(max-width:920px){
.nav ul{display:none}
.hero h1{font-size:40px}
.metrics{grid-template-columns:repeat(2,1fr)}
.coaches,.plans{grid-template-columns:1fr}
.table thead{display:none}
.table td{display:block;border-top:none;padding:6px 18px}
.table tr{display:block;border-top:1px solid var(--line);padding:12px 0}
}
</style>
</head>
<body>
<header>
<div class="wrap nav">
<div class="brand">PULSE<i>.</i></div>
<ul>
<li><a href="#schedule">团课表</a></li>
<li><a href="#coach">教练团队</a></li>
<li><a href="#plan">会籍方案</a></li>
</ul>
<a href="#plan" class="cta">预约体验课</a>
</div>
</header>
<main class="wrap">
<section class="hero">
<span class="kicker">● 本周还剩 12 个体验名额</span>
<h1>不喊口号<br>只看<span>你练完的样子</span></h1>
<p>PULSE 是一家只做力量与体能的小型工作室。团课每节最多 8 人，教练全程盯动作——我们相信练对，比练久重要得多。</p>
<div class="hero-btns">
<a href="#schedule" class="cta">查看本周课表</a>
<a href="#coach" class="btn2">认识教练</a>
</div>
<div class="metrics">
<div class="metric"><b>8</b><span>人 · 团课上限</span></div>
<div class="metric"><b>320㎡</b><span>训练区面积</span></div>
<div class="metric"><b>6</b><span>位持证教练</span></div>
<div class="metric"><b>97%</b><span>会员续卡率</span></div>
</div>
</section>
<section id="schedule">
<div class="head">
<div><h2>本周团课表</h2><p>提前 12 小时可免费取消，满 3 人即开课。</p></div>
<a href="#plan" class="btn2">下载完整课表</a>
</div>
<table class="table">
<thead><tr><th>时间</th><th>课程</th><th>类型</th><th>教练</th><th>剩余名额</th></tr></thead>
<tbody>
<tr><td>周一 19:30</td><td>基础力量 · 下肢日</td><td><span class="tag t-str">力量</span></td><td>老陈</td><td class="slots">2 / 8</td></tr>
<tr><td>周二 07:00</td><td>晨间 HIIT 燃脂</td><td><span class="tag t-hiit">体能</span></td><td>Vivi</td><td class="slots">5 / 8</td></tr>
<tr><td>周三 20:00</td><td>硬拉技术精修</td><td><span class="tag t-str">力量</span></td><td>老陈</td><td class="slots">1 / 8</td></tr>
<tr><td>周四 19:00</td><td>核心与呼吸控制</td><td><span class="tag t-yoga">恢复</span></td><td>小林</td><td class="slots">6 / 8</td></tr>
<tr><td>周五 19:30</td><td>壶铃循环训练</td><td><span class="tag t-hiit">体能</span></td><td>Vivi</td><td class="slots">3 / 8</td></tr>
<tr><td>周六 10:00</td><td>周末长课 · 全身</td><td><span class="tag t-str">力量</span></td><td>阿凯</td><td class="slots">4 / 8</td></tr>
</tbody>
</table>
</section>
<section id="coach">
<div class="head"><div><h2>教练团队</h2><p>每位教练都有 5 年以上一线带课经验。</p></div></div>
<div class="coaches">
<div class="coach"><div class="avatar c1">🏋️</div><div class="body"><h3>老陈</h3><div class="role">力量举 · 主教练</div><p>专注三大项技术打磨，带出过 12 位省级力量举参赛选手。</p></div></div>
<div class="coach"><div class="avatar c2">🔥</div><div class="body"><h3>Vivi</h3><div class="role">体能 · 减脂方向</div><p>擅长把高强度间歇拆成普通人能坚持下来的节奏，课后不虚脱。</p></div></div>
<div class="coach"><div class="avatar c3">🧘</div><div class="body"><h3>小林</h3><div class="role">康复 · 体态调整</div><p>康复治疗背景，负责久坐人群的肩颈、腰背评估与训练方案。</p></div></div>
</div>
</section>
<section id="plan">
<div class="head"><div><h2>会籍方案</h2><p>无隐形消费，随时可转让，不满意 7 天内全额退。</p></div></div>
<div class="plans">
<div class="plan">
<h3>次卡</h3>
<div class="price">¥680<small> / 10 次</small></div>
<ul><li>10 节团课，一年有效</li><li>免费体测一次</li><li>器械区随时开放</li></ul>
<a href="#" class="btn2">选择次卡</a>
</div>
<div class="plan hot">
<h3>季卡</h3>
<div class="price">¥1,880<small> / 3 个月</small></div>
<ul><li>团课不限次</li><li>每月 1 节私教</li><li>训练计划定制</li><li>体测报告双周更新</li></ul>
<a href="#" class="cta">选择季卡</a>
</div>
<div class="plan">
<h3>私教包</h3>
<div class="price">¥4,200<small> / 20 节</small></div>
<ul><li>一对一私教 20 节</li><li>饮食建议表</li><li>团课不限次赠送</li></ul>
<a href="#" class="btn2">选择私教包</a>
</div>
</div>
</section>
</main>
<footer class="wrap">
<span>© 2026 PULSE 力量工作室</span>
<span>创业大道 66 号 B1 · 06:30 – 22:30</span>
</footer>
</body>
</html>
原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1865.html
微信扫一扫 
支付宝扫一扫 
