知行学堂在线教育课程平台落地页 HTML 单页源码

这是一款面向在线教育、知识付费与职业培训场景的课程平台落地页模板。整体采用天蓝到靛蓝的渐变作为主视觉，配合半透明毛玻璃卡片与高亮渐变按钮，第一时间传达出「专业、系统、可信赖」的产品气质。首屏左侧是核心卖点与平台数据，右侧放置了一个课程浏览器的 mockup，让访客一眼理解产品形态。

页面结构上采用了经典落地页三段式：首屏卖点 → 六宫格热门课程 → 金牌导师墙 → 底部 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.0">
<title>知行学堂 · 在线教育课程平台</title>
<style>
  :root{
    --sky:#0ea5e9; --indigo:#6366f1; --cyan:#06b6d4;
    --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --bg:#f8fafc;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  /* 顶栏 */
  header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:66px}
  .logo{font-weight:800;font-size:20px;background:linear-gradient(90deg,var(--sky),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
  .menu{display:flex;gap:26px;font-size:15px;color:var(--muted)}
  .menu a:hover{color:var(--indigo)}
  .btn{padding:11px 22px;border-radius:999px;font-weight:600;font-size:14px;display:inline-block;transition:.2s}
  .btn-primary{background:linear-gradient(90deg,var(--sky),var(--indigo));color:#fff}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(99,102,241,.35)}
  .btn-ghost{border:1.5px solid var(--indigo);color:var(--indigo)}
  /* 首屏 */
  .hero{background:radial-gradient(1200px 500px at 80% -10%,rgba(6,182,212,.18),transparent),linear-gradient(135deg,#0b1220,#0f1f3d);color:#e6f0ff;padding:84px 0 96px}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
  .tag{display:inline-block;font-size:13px;padding:6px 14px;border:1px solid rgba(125,211,252,.4);border-radius:999px;color:#bae6fd;margin-bottom:18px}
  .hero h1{font-size:46px;line-height:1.2;font-weight:800;margin-bottom:18px}
  .hero h1 span{background:linear-gradient(90deg,var(--cyan),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p.lead{color:#a9c2e6;font-size:17px;margin-bottom:28px;max-width:520px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .stats{display:flex;gap:34px;margin-top:38px}
  .stats b{display:block;font-size:28px;color:#fff}
  .stats small{color:#9db8da}
  /* 浏览器 mockup */
  .mock{border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.12);background:#0b1220}
  .bar{display:flex;gap:7px;padding:13px 16px;background:#0e1730}
  .bar i{width:11px;height:11px;border-radius:50%;background:#33415c;display:inline-block}
  .mock-body{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .card-mini{background:linear-gradient(160deg,rgba(99,102,241,.18),rgba(6,182,212,.12));border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px}
  .card-mini b{display:block;color:#fff;font-size:15px;margin-bottom:6px}
  .card-mini small{color:#9db8da;font-size:13px}
  /* 区块标题 */
  .sec{padding:74px 0}
  .sec h2{font-size:32px;text-align:center;margin-bottom:10px}
  .sec .sub{text-align:center;color:var(--muted);margin-bottom:42px}
  .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .course{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.22s}
  .course:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(15,23,42,.1)}
  .thumb{height:128px;background:linear-gradient(135deg,var(--sky),var(--cyan))}
  .course:nth-child(2) .thumb{background:linear-gradient(135deg,var(--indigo),#a855f7)}
  .course:nth-child(3) .thumb{background:linear-gradient(135deg,#10b981,#06b6d4)}
  .course:nth-child(4) .thumb{background:linear-gradient(135deg,#f59e0b,#ef4444)}
  .course:nth-child(5) .thumb{background:linear-gradient(135deg,#ec4899,#8b5cf6)}
  .course:nth-child(6) .thumb{background:linear-gradient(135deg,#0ea5e9,#22c55e)}
  .course .pad{padding:18px}
  .course h3{font-size:17px;margin-bottom:6px}
  .course p{font-size:13px;color:var(--muted);margin-bottom:12px}
  .course .meta{display:flex;justify-content:space-between;align-items:center;font-size:14px}
  .price{color:var(--indigo);font-weight:700}
  /* 讲师 */
  .teachers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .teacher{text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 14px}
  .avatar{width:64px;height:64px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,var(--indigo),var(--cyan))}
  .teacher b{display:block;font-size:15px}
  .teacher small{color:var(--muted)}
  /* 结尾 CTA */
  .cta{background:linear-gradient(135deg,var(--indigo),var(--sky));color:#fff;border-radius:22px;padding:54px;text-align:center;margin:0 0 74px}
  .cta h2{color:#fff;margin-bottom:12px}
  .cta p{opacity:.92;margin-bottom:24px}
  footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted);font-size:14px;text-align:center}
  @media(max-width:860px){
    .hero-grid{grid-template-columns:1fr;gap:30px}
    .courses,.teachers{grid-template-columns:repeat(2,1fr)}
    .hero h1{font-size:34px}.menu{display:none}
  }
  @media(max-width:560px){.courses,.teachers{grid-template-columns:1fr}.stats{gap:20px}}
</style>
</head>
<body>
<header>
  <div class="wrap nav">
    <div class="logo">知行学堂</div>
    <nav class="menu"><a href="#courses">课程</a><a href="#teachers">名师</a><a href="#join">训练营</a><a href="#join">企业版</a></nav>
    <a href="#join" class="btn btn-primary">免费试听</a>
  </div>
</header>

<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tag">已有 86 万学员在知行学堂成长</span>
      <h1>把知识变成<span>可执行的成长</span></h1>
      <p class="lead">从编程、设计到职场硬技能，体系化课程 + 项目实战 + 导师答疑，让你学得会、用得上、走得远。</p>
      <div class="hero-cta">
        <a href="#courses" class="btn btn-primary">浏览全部课程</a>
        <a href="#join" class="btn btn-ghost" style="color:#bae6fd;border-color:#7dd3fc">领取新人礼包</a>
      </div>
      <div class="stats">
        <div><b>1200+</b><small>精品课程</small></div>
        <div><b>320</b><small>实战项目</small></div>
        <div><b>4.9</b><small>学员评分</small></div>
      </div>
    </div>
    <div class="mock">
      <div class="bar"><i></i><i></i><i></i></div>
      <div class="mock-body">
        <div class="card-mini"><b>Python 数据分析</b><small>第 6 章 · 可视化</small></div>
        <div class="card-mini"><b>UI 设计实战</b><small>第 3 章 · 组件库</small></div>
        <div class="card-mini"><b>产品经理入门</b><small>第 9 章 · 需求</small></div>
        <div class="card-mini"><b>职场沟通力</b><small>第 2 章 · 表达</small></div>
      </div>
    </div>
  </div>
</section>

<section class="sec" id="courses">
  <div class="wrap">
    <h2>热门课程</h2>
    <p class="sub">覆盖技术、设计、职场三大方向，按需选择你的成长路径</p>
    <div class="courses">
      <div class="course"><div class="thumb"></div><div class="pad"><h3>Python 数据分析实战</h3><p>从 Pandas 到可视化报表，42 个真实数据集练手。</p><div class="meta"><span class="price">¥199</span><span>4.9 ★</span></div></div></div>
      <div class="course"><div class="thumb"></div><div class="pad"><h3>UI 设计从 0 到 1</h3><p>界面布局、组件规范与作品集，设计师入门首选。</p><div class="meta"><span class="price">¥259</span><span>4.8 ★</span></div></div></div>
      <div class="course"><div class="thumb"></div><div class="pad"><h3>前端工程师训练营</h3><p>HTML/CSS/JS 到框架工程化，项目驱动教学。</p><div class="meta"><span class="price">¥399</span><span>5.0 ★</span></div></div></div>
      <div class="course"><div class="thumb"></div><div class="pad"><h3>产品经理方法论</h3><p>需求洞察、原型设计与上线复盘全流程拆解。</p><div class="meta"><span class="price">¥299</span><span>4.9 ★</span></div></div></div>
      <div class="course"><div class="thumb"></div><div class="pad"><h3>职场表达与沟通</h3><p>汇报、谈判、向上管理，轻松搞定职场关系。</p><div class="meta"><span class="price">¥149</span><span>4.7 ★</span></div></div></div>
      <div class="course"><div class="thumb"></div><div class="pad"><h3>AIGC 创作工作流</h3><p>用 AI 提效写作、设计与代码，效率翻倍。</p><div class="meta"><span class="price">¥219</span><span>4.9 ★</span></div></div></div>
    </div>
  </div>
</section>

<section class="sec" id="teachers" style="background:#fff">
  <div class="wrap">
    <h2>金牌导师</h2>
    <p class="sub">来自一线大厂与高校的实战派讲师</p>
    <div class="teachers">
      <div class="teacher"><div class="avatar"></div><b>陈知行</b><small>前大厂技术专家</small></div>
      <div class="teacher"><div class="avatar"></div><b>林墨</b><small>资深 UI 设计总监</small></div>
      <div class="teacher"><div class="avatar"></div><b>苏航</b><small>产品负责人</small></div>
      <div class="teacher"><div class="avatar"></div><b>周岚</b><small>职场沟通教练</small></div>
    </div>
  </div>
</section>

<section class="wrap" id="join">
  <div class="cta">
    <h2>现在加入，领取 7 天免费会员</h2>
    <p>解锁全部精品课程、实战项目与导师答疑，随时退订无负担。</p>
    <a href="#" class="btn btn-primary" style="background:#fff;color:var(--indigo)">立即免费试听</a>
  </div>
</section>

<footer>© 2026 知行学堂 · 让每一次学习都有回响</footer>
</body>
</html>

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