小草少儿编程_H5/index.html · 约 3500 字符
1<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4<meta charset="UTF-8"/>
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
6<title>首页 · 小草少儿编程</title>
7<link rel="stylesheet" href="style.css"/>
8</head>
9<body>
10
11<div class="banner">
12 <div>
13 <div class="bn-title">小天才编程营</div>
14 <div class="bn-sub">4-16 岁少儿编程 · 图形化到 Python 一站式进阶</div>
15 <div class="bn-badge">🔥 暑期班 8 折抢报中</div>
16 </div>
17 <div class="bn-emoji">🤖</div>
18</div>
19<div class="quick-grid">
20 <a href="courses.html"><div class="qicon">🧩</div>免费试听</a>
21 <a href="courses.html"><div class="qicon">📚</div>全部课程</a>
22 <a href="works.html"><div class="qicon">🎨</div>作品广场</a>
23 <a href="mine.html"><div class="qicon">👤</div>我的中心</a>
24</div>
25<div class="trial-card" data-toast="报名成功，老师将在 24 小时内联系你">
26 <div class="tc-emoji">🎁</div>
27 <div class="tc-body">
28 <b>0 元体验课 · 限时领取</b>
29 <span>1 对 1 试听 + 学习测评 + 专属规划，名额仅剩 12 个</span>
30 </div>
31 <div class="tc-btn">立即领取</div>
32</div>
33<div class="section-title">今日推荐课程 <span>查看全部 ›</span></div>
34<div class="track-card" data-toast="已加入试听清单">
35 <div class="tc-emoji">🐢</div>
36 <div class="tc-body">
37 <div class="tc-name">Scratch 创意动画</div>
38 <div class="tc-desc">6-8 岁 · 32 课时 · 作品式教学</div>
39 <div class="tc-meta">主讲：王老师 · 好评 99.2%</div>
40 <div class="tc-foot">
41 <div class="tc-free">免费试听</div>
42 <div class="tc-btn2">预约试听</div>
43 </div>
44 </div>
45</div>
46<div class="track-card" data-toast="已加入试听清单">
47 <div class="tc-emoji">🐍</div>
48 <div class="tc-body">
49 <div class="tc-name">Python 趣味编程</div>
50 <div class="tc-desc">9-12 岁 · 48 课时 · 项目实战</div>
51 <div class="tc-meta">主讲：李老师 · 信息学竞赛教练</div>
52 <div class="tc-foot">
53 <div class="tc-free" style="color:#f97316">¥1280/期</div>
54 <div class="tc-btn2">查看详情</div>
55 </div>
56 </div>
57</div>
58<div class="section-title">学习路径规划</div>
59<div class="card" style="margin-top:0">
60 <div style="font-size:12px;color:#7fb4ab;margin-bottom:8px">零基础 → 竞赛获奖的成长阶梯</div>
61 <div class="skill-row"><span>启蒙探索（4-6岁）</span><span style="color:#10b981">✓ 已学</span></div>
62 <div class="skill-row"><span>图形编程（6-9岁）</span><span style="color:#f97316;font-weight:700">学习中</span></div>
63 <div class="skill-row"><span>Python 入门（9-12岁）</span><span style="color:#a4ccc5">未开始</span></div>
64 <div class="skill-row"><span>竞赛冲刺（12岁+）</span><span style="color:#a4ccc5">未开始</span></div>
65</div>
66
67<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="courses.html"><span class="icon">📚</span>课程</a><a class="" href="classroom.html"><span class="icon">✏️</span>课堂</a><a class="" href="works.html"><span class="icon">🎨</span>作品</a><a class="" href="report.html"><span class="icon">📈</span>报告</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
68<script src="data.js"></script>
69<script src="app.js"></script>
70</body>
71</html>