基于 jQuery + Swiper 打造的企业学习平台前端模板。纯静态 HTML，无需构建工具，替换品牌素材即可上线。
企业培训平台的前端，难点不在页面多，而在”学习动线”完整：选课 → 学习 → 收藏 → 评价，一环都不能少。这套模板把 HR 学习天地、课程百宝箱、课程详情、我的收藏、写评价等学习平台核心页面全部做完，8 个页面即拆即用，搭配图片查看器与视差动效，半天即可搭建一个企业大学 / 在线学习平台的前端骨架。
模板亮点
1. 8 页学习平台核心动线
- 首页（index）：TAP、LEAP 学习项目入口 + HR 学习天地 + 课程百宝箱 + TD 资料库
- HR 学习天地（hr）：面向 HR 人群的专区页
- 课程百宝箱（kcbbx / kcbbx_list / kcbbx_details）：课程分类 → 课程列表 → 课程详情三级结构，内置变革管理、管理团队、管理自己、管理业务、人才测评等分类体系
- 我的收藏（wdsc）：学员个人内容沉淀
- 写评价（xpj）：课后评价提交页
“浏览 → 学习 → 收藏 → 反馈”的用户路径完整闭环。
2. 完整课程分类体系
课程百宝箱内置”变革管理 / 管理团队 / 管理自己 / 管理业务 / 人才测评”五大管理类目，这套分类体系可直接复用于任何企业学习场景。
3. 学习场景交互组件
- jquery-viewer 图片查看器：课件图表、证书大图缩放查看
- ios-parallax 视差效果：首屏层次感动效
- animate.css + Swiper：入场动画与轮播
4. 完整响应式适配
PC 端与移动端双套样式（style.css / style_mobile.css），员工手机端碎片化学习体验完整。
技术栈
| 技术 | 用途 |
|---|---|
| HTML5 / CSS3 | 页面结构与样式 |
| jQuery | DOM 操作与交互 |
| Swiper | 轮播 |
| jquery-viewer | 图片缩放查看器 |
| ios-parallax | 视差动效 |
| animate.css | 入场动画 |
项目结构
kc/
├── index.html # 首页（TAP/LEAP + 学习专区入口）
├── hr.html # HR 学习天地
├── kcbbx.html # 课程百宝箱（五大分类）
├── kcbbx_list.html # 课程列表
├── kcbbx_details.html # 课程详情
├── wdsc.html # 我的收藏
├── xpj.html # 写评价
├── list.html # 通用列表页
├── css/ # animate + viewer + PC/移动双端样式
├── js/ # jQuery / Swiper / viewer / parallax
└── img/ # 品牌与课程素材快速开始
纯静态模板，无需安装依赖：
# 方式一：直接双击 index.html 即可浏览
# 方式二：使用本地静态服务器（推荐）
npx serve .二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 中的 logo 与图片，同名覆盖即可 |
| 修改课程分类 | kcbbx.html 五大分类区块按需增删 |
| 上新课程 | 复制 kcbbx_details.html 改名，替换内容 |
| 接入真实数据 | 列表 / 详情页结构规整，对接任意后端模板引擎 |
| 增删页面 | 复制任一页面改名改造，互不影响 |
适用场景
企业大学 / 内训平台、在线教育网站、知识付费产品、职业培训机构、HR 学习社区、管理咨询课程站，也可作为任何”分类 → 列表 → 详情 → 互动”型内容平台的前端骨架。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 2~3 周起 | 半天搭建前端骨架 |
| 学习动线 | 需自行梳理 | 选课/收藏/评价闭环已成型 |
| 移动端适配 | 需额外开发 | 双端样式已完成 |
| 维护成本 | 自行承担 | 纯静态结构，改文案即可迭代 |
在线预览
纯静态文件，上传至任意静态托管（Vercel / Netlify / 阿里云 OSS / 宝塔）即可直接访问。
原文链接：https://www.fedshare.cn/archives/1551，转载请注明出处。
评论0