小星球亲子成长中心 HTML 单页源码（明亮糖果色，含课程体系 + 一日流程 + 师资团队）

本源码是一款为早教中心、托育园、亲子成长空间打造的「课程展示 + 信任建立 + 试听预约」单页模板，采用明亮的糖果黄、天空蓝、珊瑚粉与薄荷绿主调，视觉上活泼但不吵闹，与「不催、不比、不贴标签」的教育理念相得益彰。首屏用彩色几何块拼出拼图、画笔、音符、书本四个符号，瞬间传递出感统、艺术、音乐、阅读等课程场景。

页面内容围绕家长最关心的「学什么、怎么学、谁来教」展开：六大课程按 6-18 个月、18-30 个月、2-3 岁、3-4 岁、4-5 岁、5-6 岁六个月龄段分龄设计；「一日流程」以时间表形式展示晨间探索、圆圈时间、主题课程、户外时光、整理告别，让家长对节奏一目了然；「师资」用四位老师的头像卡片展示资历与专业认证，增强安全感；最后是免费试听 CTA。

适合早教机构、托育园、亲子乐园、儿童成长中心作为官网或线上试听落地页。替换机构名、课程、师资与校区信息后即可上线，也可作为教育类作品集或新店招生宣传页面。

使用教程

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">
<title>小星球亲子成长中心 · 0-6 岁早教</title>
<style>
:root{
  --yellow:#ffd23f;--blue:#4cc9f0;--coral:#ff8a7a;--mint:#7ee0b8;--purple:#b39ddb;
  --bg:#fffdf6;--ink:#33404f;--muted:#7c8a99;--white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;-webkit-font-smoothing:antialiased}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}

.nav{position:sticky;top:0;z-index:60;background:rgba(255,253,246,.94);backdrop-filter:blur(10px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:80px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;letter-spacing:.5px}
.logo .b{width:40px;height:40px;border-radius:14px;background:var(--yellow);display:grid;place-items:center;font-size:20px;transform:rotate(-8deg);box-shadow:0 4px 0 #e8b91f}
.menu{display:flex;gap:30px;font-size:15px;font-weight:600;color:var(--muted)}
.menu a:hover{color:var(--coral)}
.btn{display:inline-block;padding:13px 30px;border-radius:999px;font-size:15px;font-weight:800;transition:.2s}
.btn-y{background:var(--yellow);color:#5b4400;box-shadow:0 5px 0 #e8b91f}
.btn-y:hover{transform:translateY(2px);box-shadow:0 3px 0 #e8b91f}
.btn-c{background:var(--coral);color:#fff;box-shadow:0 5px 0 #e06a5b}
.btn-c:hover{transform:translateY(2px);box-shadow:0 3px 0 #e06a5b}
.btn-w{background:#fff;color:var(--ink);box-shadow:0 5px 0 #e6e0d0}
.btn-w:hover{transform:translateY(2px);box-shadow:0 3px 0 #e6e0d0}

/* hero */
.hero{padding:56px 0 90px;position:relative;overflow:hidden}
.blob{position:absolute;border-radius:50%;opacity:.5;z-index:0}
.b1{width:260px;height:260px;background:var(--blue);left:-90px;top:40px}
.b2{width:180px;height:180px;background:var(--mint);right:8%;top:0}
.b3{width:120px;height:120px;background:var(--purple);right:2%;bottom:60px}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;position:relative;z-index:2}
.pill{display:inline-block;background:var(--mint);color:#14684a;font-size:13.5px;font-weight:800;padding:7px 20px;border-radius:999px}
.hero h1{font-size:50px;font-weight:900;line-height:1.28;margin:20px 0 16px;letter-spacing:-.5px}
.hero h1 span{color:var(--coral)}
.hero h1 u{text-decoration:none;background:linear-gradient(transparent 62%,var(--yellow) 62%)}
.hero p{font-size:17px;color:var(--muted);margin-bottom:30px;max-width:420px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{background:var(--white);border-radius:40px;padding:34px;box-shadow:0 20px 50px rgba(76,201,240,.22);transform:rotate(2deg)}
.hero-art .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hero-art .k{aspect-ratio:1/1;border-radius:26px;display:grid;place-items:center;font-size:58px}
.k1{background:#fff2c9}.k2{background:#d6f2fd}.k3{background:#ffe0da}.k4{background:#d9f7ea}

/* wave */
.wave{height:70px;background:var(--white);position:relative}
.wave:before{content:"";position:absolute;top:-40px;left:0;width:100%;height:44px;background:var(--white);
  border-radius:50% 50% 0 0/100% 100% 0 0}

/* stats */
.statsec{background:var(--white);padding:20px 0 76px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.st{text-align:center;padding:22px 12px;border-radius:26px}
.st:nth-child(1){background:#fff5d4}.st:nth-child(2){background:#dff4fd}
.st:nth-child(3){background:#ffe7e1}.st:nth-child(4){background:#e0f8ef}
.st b{display:block;font-size:34px;font-weight:900;letter-spacing:-1px}
.st span{font-size:13.5px;color:var(--muted);font-weight:600}

.sec{padding:78px 0}
.sec-h{text-align:center;max-width:600px;margin:0 auto 48px}
.sec-h h2{font-size:38px;font-weight:900;margin:14px 0 10px;letter-spacing:-.5px}
.sec-h p{color:var(--muted);font-size:16px}

/* courses */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.co{background:var(--white);border-radius:32px;padding:32px 28px;transition:.3s;border:3px solid transparent}
.co:hover{transform:translateY(-10px) rotate(-1deg)}
.co:nth-child(1):hover{border-color:var(--yellow)}
.co:nth-child(2):hover{border-color:var(--blue)}
.co:nth-child(3):hover{border-color:var(--coral)}
.co:nth-child(4):hover{border-color:var(--mint)}
.co:nth-child(5):hover{border-color:var(--purple)}
.co:nth-child(6):hover{border-color:var(--yellow)}
.co .ic{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;font-size:32px;margin-bottom:18px}
.co:nth-child(1) .ic{background:#fff2c9}.co:nth-child(2) .ic{background:#d6f2fd}
.co:nth-child(3) .ic{background:#ffe0da}.co:nth-child(4) .ic{background:#d9f7ea}
.co:nth-child(5) .ic{background:#ebe3fa}.co:nth-child(6) .ic{background:#fff2c9}
.co .age{font-size:12.5px;font-weight:800;color:var(--coral);letter-spacing:1px}
.co h3{font-size:21px;font-weight:900;margin:6px 0 10px}
.co p{font-size:14.5px;color:var(--muted);line-height:1.75}

/* day */
.day{background:var(--white);border-radius:40px;padding:52px 46px}
.day-list{display:grid;gap:14px;margin-top:28px}
.dl{display:grid;grid-template-columns:100px 1fr;gap:20px;align-items:center;background:var(--bg);border-radius:20px;padding:18px 24px}
.dl b{font-size:15px;font-weight:900;color:var(--blue)}
.dl div h4{font-size:16px;font-weight:800;margin-bottom:2px}
.dl div p{font-size:14px;color:var(--muted)}

/* teachers */
.tchs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tc{background:var(--white);border-radius:30px;padding:28px 20px;text-align:center;transition:.3s}
.tc:hover{transform:translateY(-8px)}
.tc .av{width:82px;height:82px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;font-size:38px}
.tc:nth-child(1) .av{background:#fff2c9}.tc:nth-child(2) .av{background:#d6f2fd}
.tc:nth-child(3) .av{background:#ffe0da}.tc:nth-child(4) .av{background:#d9f7ea}
.tc h4{font-size:17px;font-weight:900}
.tc span{font-size:13px;color:var(--coral);font-weight:700}
.tc p{font-size:13.5px;color:var(--muted);margin-top:8px}

/* cta */
.cta{background:linear-gradient(135deg,var(--blue),var(--mint));border-radius:40px;padding:60px 46px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta:before{content:"⭐";position:absolute;font-size:120px;opacity:.14;left:5%;top:10%}
.cta:after{content:"🎈";position:absolute;font-size:110px;opacity:.14;right:5%;bottom:6%}
.cta h2{font-size:36px;font-weight:900;margin-bottom:12px;position:relative}
.cta p{margin-bottom:28px;opacity:.94;font-size:16px;position:relative}
.cta .btn{position:relative}

footer{background:var(--white);margin-top:80px;padding:48px 0 34px}
.f{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.f h4{font-size:14.5px;font-weight:900;margin-bottom:14px}
.f a,.f p{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.f a:hover{color:var(--coral)}
.copy{text-align:center;color:var(--muted);font-size:13px;margin-top:32px;padding-top:22px;border-top:2px dashed #eee6d8}

@media(max-width:960px){
  .menu{display:none}
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:36px}
  .stats{grid-template-columns:1fr 1fr}
  .courses{grid-template-columns:1fr 1fr}
  .tchs{grid-template-columns:1fr 1fr}
  .f{grid-template-columns:1fr 1fr}
  .day{padding:32px 24px}
  .dl{grid-template-columns:1fr;gap:6px}
}
@media(max-width:560px){
  .courses{grid-template-columns:1fr}
  .sec-h h2{font-size:28px}
}
</style>
</head>
<body>

<nav class="nav"><div class="wrap nav-in">
  <div class="logo"><span class="b">🪐</span>小星球</div>
  <div class="menu"><a href="#course">课程体系</a><a href="#day">一日流程</a><a href="#teacher">师资</a><a href="#visit">预约参观</a></div>
  <a href="#visit" class="btn btn-c">免费试听</a>
</div></nav>

<header class="hero">
  <div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
  <div class="wrap hero-in">
    <div>
      <span class="pill">0-6 岁 · 蒙氏 + 感统融合</span>
      <h1>让每个孩子<br>都拥有<span>自己的</span><br><u>小小星球</u></h1>
      <p>不催、不比、不贴标签。我们用游戏化的方式，陪孩子度过最需要被看见的六年。</p>
      <div class="hero-btns">
        <a href="#visit" class="btn btn-y">预约一节免费体验课</a>
        <a href="#course" class="btn btn-w">看看课程</a>
      </div>
    </div>
    <div class="hero-art"><div class="row">
      <div class="k k1">🧩</div><div class="k k2">🎨</div>
      <div class="k k3">🎵</div><div class="k k4">📚</div>
    </div></div>
  </div>
</header>

<div class="wave"></div>
<section class="statsec"><div class="wrap"><div class="stats">
  <div class="st"><b>12</b><span>年办学经验</span></div>
  <div class="st"><b>1:4</b><span>师生配比</span></div>
  <div class="st"><b>3800+</b><span>毕业小朋友</span></div>
  <div class="st"><b>98%</b><span>家长续费率</span></div>
</div></div></section>

<section class="sec" id="course"><div class="wrap">
  <div class="sec-h">
    <span class="pill">COURSES</span>
    <h2>六大成长课程</h2>
    <p>按月龄分班，每 8 周做一次成长评估，课程会跟着孩子的节奏调整。</p>
  </div>
  <div class="courses">
    <div class="co"><div class="ic">🧩</div><div class="age">6-18 个月</div><h3>感统启蒙</h3><p>通过爬行隧道、触觉板、平衡木等器械，帮助宝宝建立最初的身体感知与空间意识。</p></div>
    <div class="co"><div class="ic">🎨</div><div class="age">18-30 个月</div><h3>创意涂鸦</h3><p>不教画法，只提供材料。手指画、拓印、黏土，让孩子先爱上「弄脏手」这件事。</p></div>
    <div class="co"><div class="ic">🎵</div><div class="age">2-3 岁</div><h3>奥尔夫音乐</h3><p>用身体做乐器，跟着节奏跑跳拍打。音准可以慢慢来，节奏感要趁早建立。</p></div>
    <div class="co"><div class="ic">🔬</div><div class="age">3-4 岁</div><h3>小小科学家</h3><p>浮沉实验、彩虹牛奶、种一颗豆子。答案不重要，「为什么」的表情才最珍贵。</p></div>
    <div class="co"><div class="ic">🗣️</div><div class="age">4-5 岁</div><h3>表达与故事</h3><p>绘本共读 + 角色扮演，让内向的孩子敢开口，让爱说的孩子学会听别人说完。</p></div>
    <div class="co"><div class="ic">🎒</div><div class="age">5-6 岁</div><h3>幼小衔接</h3><p>不是提前学小学课本，而是练专注力、时间管理和自己整理书包的能力。</p></div>
  </div>
</div></section>

<section class="sec" id="day"><div class="wrap"><div class="day">
  <div class="sec-h" style="margin-bottom:8px">
    <span class="pill">A DAY HERE</span>
    <h2>在小星球的一天</h2>
    <p>每天 4 小时的半日班，节奏松紧有度，留足自由玩耍的时间。</p>
  </div>
  <div class="day-list">
    <div class="dl"><b>09:00</b><div><h4>晨间自由探索</h4><p>孩子自己选择区角：建构区、图书角、娃娃家，老师只观察不干预。</p></div></div>
    <div class="dl"><b>09:40</b><div><h4>圆圈时间</h4><p>打招呼、看天气、说说昨天发生的事。练习轮流发言和倾听。</p></div></div>
    <div class="dl"><b>10:10</b><div><h4>主题课程</h4><p>按当周主题开展感统 / 音乐 / 科学活动，小组进行，每组不超过 6 人。</p></div></div>
    <div class="dl"><b>11:00</b><div><h4>户外时光</h4><p>沙水区、攀爬架、种植园。下小雨也照常出门，我们准备了雨衣雨鞋。</p></div></div>
    <div class="dl"><b>11:50</b><div><h4>整理与告别</h4><p>孩子自己收玩具、穿外套、和老师击掌道别，一天在小仪式里结束。</p></div></div>
  </div>
</div></div></section>

<section class="sec" id="teacher"><div class="wrap">
  <div class="sec-h">
    <span class="pill">OUR TEAM</span>
    <h2>陪伴孩子的人</h2>
    <p>全部持有教师资格证与蒙氏 / 感统专业认证，平均从业 7 年。</p>
  </div>
  <div class="tchs">
    <div class="tc"><div class="av">👩‍🏫</div><h4>林老师</h4><span>园长 · 12 年</span><p>AMS 蒙台梭利认证，两个孩子的妈妈。</p></div>
    <div class="tc"><div class="av">🧑‍🏫</div><h4>陈老师</h4><span>感统主教 · 8 年</span><p>儿童康复专业，擅长大运动与前庭训练。</p></div>
    <div class="tc"><div class="av">👨‍🎨</div><h4>周老师</h4><span>艺术主教 · 6 年</span><p>美院毕业，相信孩子的画不需要被评分。</p></div>
    <div class="tc"><div class="av">👩‍⚕️</div><h4>吴老师</h4><span>保健医 · 9 年</span><p>驻园护士，每日晨检与营养配餐把关。</p></div>
  </div>
</div></section>

<section class="sec" id="visit"><div class="wrap"><div class="cta">
  <h2>先来玩一次，再决定</h2>
  <p>免费体验课每周三、周六开放，家长可全程陪同，不推销不催单。</p>
  <a href="#" class="btn btn-y">预约本周体验课</a>
</div></div></section>

<footer><div class="wrap">
  <div class="f">
    <div><div class="logo" style="margin-bottom:14px"><span class="b">🪐</span>小星球</div><p>0-6 岁亲子成长中心<br>让童年有足够多的下午。</p></div>
    <div><h4>课程</h4><a href="#">感统启蒙</a><a href="#">创意艺术</a><a href="#">幼小衔接</a></div>
    <div><h4>校区</h4><a href="#">城西中心校区</a><a href="#">滨江校区</a><a href="#">未来科技城校区</a></div>
    <div><h4>联系</h4><p>周一至周日 08:30-18:00</p><p>400-123-6688</p><p>hello@xiaoxingqiu.cn</p></div>
  </div>
  <div class="copy">© 2026 小星球亲子成长中心 · 本页为 HTML 单页模板演示，内容均为虚构</div>
</div></footer>

</body>
</html>

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