在线课程详情页 HTML 单页源码（教育平台模板）

本源码是一款在线教育平台的课程详情页模板，参考主流知识付费产品的信息架构设计。首屏为深紫渐变的课程主视觉，左侧呈现课程标题、评分、学习人数等关键信息，右侧是带视频封面的粘性购买卡片（滚动时始终跟随），最大化转化效率。

核心亮点是完整的信息层次：「你将学到什么」双列勾选清单、六章可折叠的课程大纲（含免费试看标记与每节时长）、讲师背景卡片、三条真实感学员评价，右侧栏还有课程参数表、适合人群与相关课程推荐。折叠大纲使用原生 details/summary 标签实现，无需 JavaScript；限时价格、倒计时与折扣标签则直击付费决策。

适合知识付费平台、企业内训系统、职业教育机构、独立讲师售课页使用。替换课程名称、章节内容与价格后即可作为落地页投放，也可作为电商类详情页的结构参考。

使用教程

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{
  --bg:#f7f8fa;
  --card:#ffffff;
  --line:#e6e9ef;
  --pri:#7c3aed;
  --pri-d:#6528d4;
  --pri-l:#f2ecff;
  --acc:#f59e0b;
  --ok:#10b981;
  --text:#1a1d29;
  --muted:#6f7688;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.78;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* 顶栏 */
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:17px}
.logo i{
  width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--pri),#a855f7);
  color:#fff;font-style:normal;display:grid;place-items:center;font-size:14px;
}
.nav ul{display:flex;gap:26px;list-style:none;font-size:14.5px;color:var(--muted)}
.nav ul a:hover{color:var(--pri)}
.nav .me{width:34px;height:34px;border-radius:50%;background:var(--pri-l);color:var(--pri-d);display:grid;place-items:center;font-weight:800;font-size:13px}

/* Hero */
.hero{background:linear-gradient(150deg,#2b1a5e,#4c1d95 55%,#7c3aed);color:#fff;padding:52px 0 62px}
.hgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.crumb{font-size:13px;opacity:.7;margin-bottom:16px}
.crumb a:hover{text-decoration:underline}
.badges{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.badges span{font-size:12px;padding:4px 12px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.badges .hot{background:var(--acc);color:#3a2405;font-weight:700}
.hero h1{font-size:clamp(27px,4.6vw,42px);line-height:1.2;font-weight:900;letter-spacing:-.02em;margin-bottom:14px}
.hero .lead{font-size:16px;opacity:.86;max-width:560px;margin-bottom:24px}
.hmeta{display:flex;gap:26px;flex-wrap:wrap;font-size:14px}
.hmeta div{display:flex;align-items:center;gap:7px}
.hmeta b{font-weight:800}
.stars{color:var(--acc);letter-spacing:1px}

/* 购买卡 */
.buy{
  background:var(--card);color:var(--text);border-radius:18px;padding:24px;
  box-shadow:0 24px 60px rgba(20,10,50,.3);position:sticky;top:84px;
}
.cover{
  aspect-ratio:16/9;border-radius:12px;margin-bottom:18px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#7c3aed,#c026d3 60%,#f59e0b);display:grid;place-items:center;
}
.cover .play{
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;
  cursor:pointer;transition:.25s;
}
.cover .play:hover{transform:scale(1.1)}
.cover .play::after{content:"";border-left:16px solid var(--pri);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.cover .lb{position:absolute;bottom:9px;right:11px;font-size:11.5px;background:rgba(0,0,0,.6);color:#fff;padding:3px 9px;border-radius:5px}
.pr{display:flex;align-items:baseline;gap:11px;margin-bottom:6px}
.pr .n{font-size:34px;font-weight:900;color:var(--pri-d);letter-spacing:-.02em}
.pr .o{font-size:15px;color:#a1a7b6;text-decoration:line-through}
.pr .d{font-size:12px;background:#fee2e2;color:#dc2626;padding:3px 9px;border-radius:6px;font-weight:700}
.cd{font-size:13px;color:#dc2626;margin-bottom:18px;font-weight:600}
.bt{display:block;text-align:center;padding:14px;border-radius:11px;font-weight:800;font-size:15.5px;transition:.25s;margin-bottom:10px}
.bt.p{background:var(--pri);color:#fff}
.bt.p:hover{background:var(--pri-d);transform:translateY(-2px);box-shadow:0 12px 26px rgba(124,58,237,.32)}
.bt.g{border:1.5px solid var(--line)}
.bt.g:hover{border-color:var(--pri);color:var(--pri)}
.incl{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.incl h5{font-size:13px;color:var(--muted);margin-bottom:11px;font-weight:600}
.incl li{list-style:none;font-size:13.5px;padding:5px 0;display:flex;gap:9px;align-items:flex-start}
.incl li::before{content:"✓";color:var(--ok);font-weight:900;flex-shrink:0}

/* 主体 */
main{padding:44px 0 70px}
.mgrid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 26px;margin-bottom:20px}
.panel h2{font-size:20px;font-weight:900;margin-bottom:18px;letter-spacing:-.01em}
.panel p{color:#4a5163;font-size:15px;margin-bottom:12px}

/* 学到什么 */
.learn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.learn div{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.learn div::before{content:"✓";color:var(--pri);font-weight:900;flex-shrink:0;margin-top:1px}

/* 大纲 */
.chap{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.chap summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:15px;background:#fbfcfe;transition:.2s;
}
.chap summary::-webkit-details-marker{display:none}
.chap summary:hover{background:var(--pri-l)}
.chap summary .ci{
  width:26px;height:26px;border-radius:8px;background:var(--pri-l);color:var(--pri-d);
  display:grid;place-items:center;font-size:12.5px;font-weight:900;flex-shrink:0;
}
.chap summary .cm{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:500}
.chap[open] summary{background:var(--pri-l)}
.les{padding:6px 20px 14px}
.les .l{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:14px;border-bottom:1px dashed var(--line)}
.les .l:last-child{border-bottom:none}
.les .l .ic{color:var(--muted);font-size:13px}
.les .l .free{font-size:11px;padding:2px 8px;border-radius:5px;background:#dcfce7;color:#15803d;font-weight:700}
.les .l .tm{margin-left:auto;font-size:12.5px;color:var(--muted)}

/* 讲师 */
.tea{display:flex;gap:18px;align-items:flex-start}
.tea .av{
  width:76px;height:76px;border-radius:18px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pri),#c026d3);color:#fff;font-size:27px;font-weight:900;
}
.tea h4{font-size:17.5px;margin-bottom:3px}
.tea .rl{font-size:13px;color:var(--pri-d);margin-bottom:10px;font-weight:600}
.tea p{font-size:14px;color:var(--muted);margin:0}
.tstats{display:flex;gap:22px;margin-top:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.tstats b{color:var(--text);font-weight:800}

/* 评价 */
.rev{padding:18px 0;border-bottom:1px solid var(--line)}
.rev:last-child{border-bottom:none;padding-bottom:0}
.rh{display:flex;align-items:center;gap:11px;margin-bottom:9px}
.rh .a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.rh .nm{font-size:14.5px;font-weight:700}
.rh .dt{font-size:12.5px;color:var(--muted)}
.rh .sc{margin-left:auto;color:var(--acc);font-size:13px;letter-spacing:1px}
.rev p{font-size:14px;color:#4a5163;margin:0}

/* 侧栏小卡 */
.side .panel{padding:22px}
.side h3{font-size:16px;font-weight:800;margin-bottom:14px}
.krow{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.krow:last-child{border-bottom:none}
.krow span{color:var(--muted)}
.krow b{font-weight:700}
.rel{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.rel:last-child{border-bottom:none}
.rel .th{width:62px;height:44px;border-radius:8px;flex-shrink:0}
.rel:nth-child(2) .th{background:linear-gradient(135deg,#60a5fa,#2563eb)}
.rel:nth-child(3) .th{background:linear-gradient(135deg,#34d399,#059669)}
.rel:nth-child(4) .th{background:linear-gradient(135deg,#fbbf24,#d97706)}
.rel h5{font-size:13.5px;font-weight:700;line-height:1.5;margin-bottom:3px}
.rel span{font-size:12.5px;color:var(--pri-d);font-weight:700}

footer{background:var(--card);border-top:1px solid var(--line);padding:30px 0;text-align:center;color:var(--muted);font-size:13.5px}

@media(max-width:900px){
  .hgrid,.mgrid{grid-template-columns:1fr}
  .buy{position:static}
  .learn{grid-template-columns:1fr}
  .nav ul{display:none}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><i>研</i>研途课堂</div>
    <ul><li><a href="#">全部课程</a></li><li><a href="#">学习路径</a></li><li><a href="#">实战项目</a></li><li><a href="#">求职服务</a></li></ul>
    <div class="me">学</div>
  </div>
</header>

<div class="hero">
  <div class="wrap hgrid">
    <div>
      <div class="crumb"><a href="#">首页</a> / <a href="#">编程开发</a> / <a href="#">前端开发</a></div>
      <div class="badges"><span class="hot">限时特惠</span><span>零基础友好</span><span>含就业指导</span><span>2026 最新版</span></div>
      <h1>零基础前端全栈实战课<br>从 HTML 到部署上线</h1>
      <p class="lead">128 课时系统课程，8 个完整项目实战。不讲空洞理论，每一节都带你写出能跑起来、能放进简历的东西。</p>
      <div class="hmeta">
        <div><span class="stars">★★★★★</span><b>4.9</b><span style="opacity:.75">（2,847 条评价）</span></div>
        <div>👥 <b>18,392</b> 人已学习</div>
        <div>⏱ 共 <b>52</b> 小时</div>
        <div>🔄 最近更新 <b>2026-07</b></div>
      </div>
    </div>

    <div class="buy">
      <div class="cover"><div class="play"></div><div class="lb">课程预览 · 3:24</div></div>
      <div class="pr"><span class="n">¥399</span><span class="o">¥1,299</span><span class="d">3 折</span></div>
      <div class="cd">⏰ 距活动结束还剩 2 天 06:14:33</div>
      <a href="#" class="bt p">立即购买</a>
      <a href="#" class="bt g">免费试看 6 节</a>
      <div class="incl">
        <h5>课程包含</h5>
        <ul>
          <li>52 小时高清视频，永久回看</li>
          <li>8 个可写进简历的实战项目</li>
          <li>全套源码与设计稿下载</li>
          <li>专属答疑群，讲师每日在线</li>
          <li>结课证书 + 简历修改服务</li>
          <li>7 天无理由退款保障</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<main>
  <div class="wrap mgrid">
    <div>
      <div class="panel">
        <h2>你将学到什么</h2>
        <div class="learn">
          <div>掌握 HTML5 / CSS3 完整语法与语义化写法</div>
          <div>吃透 Flex 与 Grid，独立完成任意响应式布局</div>
          <div>JavaScript 核心机制：闭包、原型、异步、模块</div>
          <div>React 18 全家桶：Hooks、路由、状态管理</div>
          <div>Node.js + Express 搭建 RESTful 后端接口</div>
          <div>MySQL 与 MongoDB 的实际选型与操作</div>
          <div>Git 团队协作流程与代码评审规范</div>
          <div>使用 Vercel / Docker 完成生产环境部署</div>
        </div>
      </div>

      <div class="panel">
        <h2>课程大纲</h2>
        <p style="font-size:13.5px;color:var(--muted);margin-bottom:16px">共 9 个章节 · 128 节课 · 52 小时 06 分</p>

        <details class="chap" open>
          <summary><span class="ci">1</span>入门准备与 HTML 基础<span class="cm">14 节 · 4h 20m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>课程导学：这门课怎么学效果最好<span class="free">免费</span><span class="tm">12:04</span></div>
            <div class="l"><span class="ic">▶</span>开发环境搭建：VS Code 与必装插件<span class="free">免费</span><span class="tm">18:33</span></div>
            <div class="l"><span class="ic">▶</span>HTML 文档结构与常用标签<span class="tm">26:15</span></div>
            <div class="l"><span class="ic">▶</span>语义化标签：为什么 div 不是万能的<span class="tm">21:47</span></div>
            <div class="l"><span class="ic">▶</span>表单元素全解与表单校验<span class="tm">33:20</span></div>
            <div class="l"><span class="ic">◈</span>实战：手写一份个人简历页面<span class="tm">48:12</span></div>
          </div>
        </details>

        <details class="chap">
          <summary><span class="ci">2</span>CSS 核心与现代布局<span class="cm">22 节 · 8h 45m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>盒模型与 BFC：一切布局的起点<span class="free">免费</span><span class="tm">29:10</span></div>
            <div class="l"><span class="ic">▶</span>Flexbox 完全指南<span class="tm">42:33</span></div>
            <div class="l"><span class="ic">▶</span>CSS Grid 二维布局实战<span class="tm">38:56</span></div>
            <div class="l"><span class="ic">▶</span>响应式设计与媒体查询策略<span class="tm">31:22</span></div>
            <div class="l"><span class="ic">◈</span>实战：还原一个电商首页设计稿<span class="tm">1:12:40</span></div>
          </div>
        </details>

        <details class="chap">
          <summary><span class="ci">3</span>JavaScript 语言核心<span class="cm">26 节 · 11h 12m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>变量、类型与隐式转换的坑<span class="free">免费</span><span class="tm">27:45</span></div>
            <div class="l"><span class="ic">▶</span>函数、作用域与闭包详解<span class="tm">44:18</span></div>
            <div class="l"><span class="ic">▶</span>原型链与 this 指向的六种情况<span class="tm">39:52</span></div>
            <div class="l"><span class="ic">▶</span>Promise / async await 异步编程<span class="tm">51:30</span></div>
            <div class="l"><span class="ic">◈</span>实战：手写一个待办清单应用<span class="tm">1:05:22</span></div>
          </div>
        </details>

        <details class="chap">
          <summary><span class="ci">4</span>React 18 与前端工程化<span class="cm">24 节 · 10h 30m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>为什么需要框架：从 DOM 操作说起<span class="tm">24:16</span></div>
            <div class="l"><span class="ic">▶</span>组件、Props 与状态管理<span class="tm">36:44</span></div>
            <div class="l"><span class="ic">▶</span>Hooks 全解与自定义 Hook<span class="tm">48:20</span></div>
            <div class="l"><span class="ic">◈</span>实战：开发一个博客系统前台<span class="tm">1:34:10</span></div>
          </div>
        </details>

        <details class="chap">
          <summary><span class="ci">5</span>Node.js 后端与数据库<span class="cm">20 节 · 9h 08m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>Node 环境与模块系统<span class="tm">28:30</span></div>
            <div class="l"><span class="ic">▶</span>Express 路由、中间件与错误处理<span class="tm">41:15</span></div>
            <div class="l"><span class="ic">▶</span>JWT 鉴权与接口安全<span class="tm">35:48</span></div>
            <div class="l"><span class="ic">◈</span>实战：为博客系统开发完整后端<span class="tm">1:48:33</span></div>
          </div>
        </details>

        <details class="chap">
          <summary><span class="ci">6</span>部署上线与求职冲刺<span class="cm">22 节 · 8h 11m</span></summary>
          <div class="les">
            <div class="l"><span class="ic">▶</span>Git 分支模型与团队协作<span class="tm">33:20</span></div>
            <div class="l"><span class="ic">▶</span>Vercel / Netlify 一键部署</span><span class="tm">22:45</span></div>
            <div class="l"><span class="ic">▶</span>Docker 容器化与云服务器部署<span class="tm">46:12</span></div>
            <div class="l"><span class="ic">▶</span>前端面试高频八股与手撕代码<span class="tm">1:02:30</span></div>
            <div class="l"><span class="ic">◈</span>简历包装与项目描述写法<span class="tm">38:55</span></div>
          </div>
        </details>
      </div>

      <div class="panel">
        <h2>讲师介绍</h2>
        <div class="tea">
          <div class="av">程</div>
          <div>
            <h4>程与舟</h4>
            <div class="rl">前字节跳动高级前端工程师 · 8 年一线开发经验</div>
            <p>先后在两家互联网公司负责 C 端核心业务前端架构，主导过日活千万级产品的重构。业余在开源社区维护三个万星项目，讲课风格以"能跑起来"为唯一标准，最讨厌只念 API 文档的教学。</p>
            <div class="tstats"><span>累计学员 <b>62,140</b></span><span>课程 <b>6</b> 门</span><span>平均评分 <b>4.9</b></span></div>
          </div>
        </div>
      </div>

      <div class="panel">
        <h2>学员评价</h2>
        <div class="rev">
          <div class="rh"><div class="a" style="background:#7c3aed">阮</div><div><div class="nm">阮同学</div><div class="dt">2026-07-21 · 已学完 86%</div></div><div class="sc">★★★★★</div></div>
          <p>之前自学半年还是写不出完整项目，跟着这门课两个月做完了三个能上线的东西。最有价值的是每节课后的"常见错误"环节，我踩过的坑基本都被提前说过了。</p>
        </div>
        <div class="rev">
          <div class="rh"><div class="a" style="background:#f59e0b">宋</div><div><div class="nm">宋小舟</div><div class="dt">2026-07-14 · 已学完 100%</div></div><div class="sc">★★★★★</div></div>
          <p>非科班转行，靠这门课的项目拿到了两个 offer。简历修改服务是真的有用，老师把我原来那份"精通各种技术"的简历改成了具体量化的项目描述。</p>
        </div>
        <div class="rev">
          <div class="rh"><div class="a" style="background:#10b981">柯</div><div><div class="nm">柯先生</div><div class="dt">2026-06-30 · 已学完 54%</div></div><div class="sc">★★★★☆</div></div>
          <p>整体节奏很好，唯一建议是 Node 部分对完全没接触过后端的人来说有点快，希望能补充几节数据库设计的基础内容。答疑群响应速度很快，这点好评。</p>
        </div>
      </div>
    </div>

    <div class="side">
      <div class="panel">
        <h3>课程信息</h3>
        <div class="krow"><span>难度等级</span><b>零基础 → 中级</b></div>
        <div class="krow"><span>课程时长</span><b>52 小时 06 分</b></div>
        <div class="krow"><span>课时数量</span><b>128 节</b></div>
        <div class="krow"><span>实战项目</span><b>8 个</b></div>
        <div class="krow"><span>观看有效期</span><b>永久</b></div>
        <div class="krow"><span>更新状态</span><b style="color:var(--ok)">已完结</b></div>
        <div class="krow"><span>配套资料</span><b>源码 + 设计稿</b></div>
      </div>

      <div class="panel">
        <h3>适合人群</h3>
        <p style="font-size:14px;color:var(--muted);margin:0">
          · 完全零基础想转行做前端的人<br>
          · 自学过一段时间但做不出完整项目<br>
          · 后端 / 测试 想补齐前端能力<br>
          · 在校学生准备秋招春招<br>
          · 想独立开发个人产品的创业者
        </p>
      </div>

      <div class="panel">
        <h3>相关课程</h3>
        <div class="rel"><div class="th"></div><div><h5>TypeScript 进阶实战：从类型体操到工程落地</h5><span>¥299</span></div></div>
        <div class="rel"><div class="th"></div><div><h5>Vue3 + Vite 企业级项目开发</h5><span>¥349</span></div></div>
        <div class="rel"><div class="th"></div><div><h5>前端性能优化：从加载到渲染的 30 个技巧</h5><span>¥199</span></div></div>
      </div>
    </div>
  </div>
</main>

<footer>© 2026 研途课堂 · 本页面为演示模板，课程与讲师信息均为虚构</footer>

</body>
</html>

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