前端必学 40个精选案例实战 从零吃透HTML5+CSS3+JS

讲师源代码

第1章 认知篇：带你走进前端的世界

视频：1-1 课程导学-让你快速了解课程(09:01)

视频：1-2 带你走进前端的世界(05:31)

视频：1-3 前端行业的发展与规划(11:26)

作业：1-4 任务：请规划自己的职业发展目标

视频：1-5 前端的今生来世(08:12)

视频：1-6 前端的三大核心技能(03:15)

第2章 体验篇：你的第一个网页【梦开始的地方】

视频：2-1 必选利器-前端开发工具(22:26)

• 集成开发环境（简称IDE）是用于提供程序开发环境的应用程序。
• IDE的作用是更快速开发代码使用，至于使用哪个IDE可根据自己的习惯而视。

HbuilderX、Sublime Text、Visual Studio Code、WebStorm

视频：2-2 初体验-搭建html 网页初始化标签(16:46)

视频：2-3 选学篇：Sublime与VSCode编辑器 初始化骨架(04:55)

第3章 案例1： 仿百度图文列表实战【HTML篇】

视频：3-1 案例分析：百度图文混排效果-修改版(03:45)

视频：3-2 理解img标签的作用和含义(17:40)

视频：3-3 理解a标签的作用和含义(12:43)

视频：3-4 理解div标签的作用和含义(07:06)

视频：3-5 理解ul标签的作用和含义(08:18)

视频：3-6 理解ol标签的作用和含义(05:33)

视频：3-7 【网页搭建思路与规范】 百度新闻图文混排骨架搭建(10:47)

第4章 案例2：前端必备技能–PS网页切图【PS篇】

• 视频：4-1 【图片认知】 5大图片类型，在网页中的展示方式(07:04)
• 视频：4-2 【基础操作】 PS从安装、新建到保存(10:32)
• 视频：4-3 【辅助切图】 PS图像放大与缩小功能及辅助线的使用(10:17)
• 视频：4-4 【字体设置】 PS软件字体操作及字体库的文字安装(08:52)
• 视频：4-5 【截取图片】 PS选取框的基本使用-(07:35)

第5章 案例3：仿QQ邮箱登陆实战【HTML篇】

• 视频：5-1 案例分析：QQ邮箱登陆框案例分析与思路-(01:41)
• 视频：5-2 第一步：input标签实现输入框(06:42)
• 视频：5-3 第二步：设置输入框默认内容(07:25)
• 视频：5-4 第三步：button标签实现按钮(04:14)
• 视频：5-5 第四步：p标签实现内容文字(07:30)
• 视频：5-6 第五步：span标签实现内置文字(05:28)
• 视频：5-7 【网页搭建思路与规范】 QQ邮箱登录框骨架HTML搭建-(12:08)
• 视频：5-8 【经验分享】如何使用浏览器功能看到元素状态(07:40)

第6章 案例4：仿B站导航条案例【基础样式】【CSS篇】

• 视频：6-1 .【案例分析】B站导航条案例(01:31)
• 视频：6-2 交互方式：CSS样式和HTML的交互方式-(15:55)
• 视频：6-3 第一步：运用CSS 基本样式设定案例元素宽高(08:04)
• 视频：6-4 第二步： 运用CSS的群组选择器来控制导航的一群元素(08:17)
• 视频：6-5 -第三步：运用CSS的基本样式设定文字的行高、对齐的样式(10:39)
• 视频：6-6 -第四步：运用CSS的基本样式设定元素的边框(16:41)
• 视频：6-7 第五步：运用CSS的基本样式设定元素的圆角(08:48)
• 视频：6-8 灵活运用：深入CSS集选择器(10:52)
• 视频：6-9 讨论：猜猜网页中哪些是CSS样式？(05:29)

第7章 案例4：仿B站导航条案例【布局】【CSS篇】

• 视频：7-1 第一步：浮动布局实现导航元素连续排列(10:12)
• 视频：7-2 第二步：元素外边距样式实现导航元素间距离(12:50)
• 视频：7-3 第三步：元素内边距样式实现文字与元素的间隙(07:35)
• 视频：7-4 重点知识：盒子模型【重点】(11:51)
• 视频：7-5 第四步：完善b站导航条效果(25:39)
• 视频：7-6 避坑：浮动的坑问题(03:08)

第8章 案例5：经典背景图文列表【CSS篇】

• 视频：8-1 案例分析：经典背景图文列表案例分析与思路(01:51)
• 视频：8-2 理论实操：图文背景如何设定(05:59)
• 视频：8-3 理论实操：理解元素的颜色背景设定(13:17)
• 视频：8-4 理论实操：元素的图片背景的平铺、大小、定位设置(15:18)
• 视频：8-5 基础知识：背景样式缩写方式(06:13)
• 视频：8-6 综合实战：背景图文列表的图片列表制作(23:19)
• 视频：8-7 理论实操：文字大小、粗细、风格、颜色的样式(09:28)
• 视频：8-8 文字大小写字母样式、字体类型、首行缩进样式(09:30)
• 视频：8-9 理论实操：文字中英文折行(04:57)
• 视频：8-10 基础知识：文本缩写样式(06:03)
• 视频：8-11 综合实战：实现背景图文列表制作(22:50)

第9章 案例6：首页单屏案例实战【CSS篇】

• 视频：9-1 案例分析：首页单屏案例分析与思路(01:32)
• 视频：9-2 .理论实操：元素的相对、绝对定位(18:02)
• 视频：9-3 .理论实操：元素的固定、相对、默认定位(07:53)
• 视频：9-4 .理论实操：标准流和非标准流(09:25)
• 视频：9-5 理论实操：元素变行内、变块、变行内块样式(14:39)
• 视频：9-6 .理论实操：CSS的重置方式与命名规范(12:35)
• 视频：9-7 综合实战：首页单屏案例实战(31:24)

第10章 案例7：仿爱奇艺视频首页新片预告案例实战【CSS篇】

• 视频：10-1 案例分析：仿爱奇艺视频首页新片预告模块(01:35)
• 视频：10-2 第一步：案例图片圆角制作(12:28)
• 视频：10-3 理论实操：百分比样式如何设置(13:02)
• 视频：10-4 第二步：图片圆角是如何被裁减的？（理解元溢出隐藏、滚动条样式）(09:24)
• 视频：10-5 理论实操：透明样式如何设置(05:50)
• 视频：10-6 第三步：首页新片预告模块的制作（1）(16:36)
• 视频：10-7 第三步：首页新片预告模块的制作（2）(16:43)
• 视频：10-8 经验分享：图片下面的三像素的解决方式(06:14)

第11章 案例8：仿京东导航条带下拉效果实战【CSS篇】

• 视频：11-1 案例分析：大厂电商导航条的模块分析与思路(01:39)
• 视频：11-2 第一步：导航条触碰下拉效果（理解鼠标浮动伪类、链接激活伪类）(07:18)
• 视频：11-3 理论实操：未访问链接、已链接激活伪类制作(08:21)
• 视频：11-4 第二步：导航条触碰时光标改变效果(06:10)
• 视频：11-5 第三步：完成大厂电商导航条模块（1）(15:25)
• 视频：11-6 第三步：完成大厂电商导航条模块（2）(12:18)
• 视频：11-7 第三步：完成大厂电商导航条模块（3）(17:31)
• 视频：11-8 第三步：完成大厂电商导航条模块（4）(11:50)
• 视频：11-9 第三步：完成大厂电商导航条模块（5）(17:19)

第12章 案例9：仿QQ空间留言板案例实战【CSS篇】

• 视频：12-1 案例分析：讲解留言板模块(01:15)
• 视频：12-2 第一步：运用文本域实现留言板的输入框(06:10)
• 视频：12-3 理论实操：单选框、多选框的制作(07:32)
• 视频：12-4 第二步：完成留言板制作(22:53)
• 视频：12-5 经验分享：框架标签的制作(06:29)

第13章 综合案例10：企业首页实战项目【PC端网页布局】

• 视频：13-1 案例分析：企业首页项目的整体的分析与制作思路(05:55)
• 视频：13-2 第一步：头部导航模块制作(18:26)
• 视频：13-3 第二步：banner切换面板模块制作（1）(16:34)
• 视频：13-4 第二步：banner切换面板模块制作（2）(15:12)
• 视频：13-5 第三步：功能性图标文字模块制作(22:44)
• 视频：13-6 第四步：产品优势模块制作(14:56)
• 视频：13-7 第五步：产品特点模块制作(27:35)
• 视频：13-8 第六步：产品服务模块制作(23:08)
• 视频：13-9 第七步：服务行业模块制作（1）(12:39)
• 视频：13-10 第七步：服务行业模块制作（2）(16:44)
• 视频：13-11 第八步：友情链接模块制作(20:32)
• 视频：13-12 第九步：底部导航模块制作(20:28)
• 视频：13-13 经验分享与项目总结(07:36)

第14章 加油站：网页是如何交互【初识JavaScript】

• 视频：14-1 理论实操：javascript：hello word(1)(09:30)
• 视频：14-2 理论实操：变量及符号(1)(09:24)
• 视频：14-3 理论实操：常用数据类型简介(1)(09:59)
• 视频：14-4 理论实操：JS的报错类型及注释方式(1)(08:04)
• 视频：14-5 理论实操：JS中的函数概念及使用(1)(13:04)
• 视频：14-6 理论实操：JS中的预解析与变量提升和作用域概念(1)(18:23)

第15章 案例11：如何让自己的百度百科点击量突破5w？【JS操作浏览器窗口】

• 视频：15-1 理论实操：js中对window对象的基本理解(16:03)
• 视频：15-2 理论实操：JS中轮循定时器与延时定时器的使用(11:20)
• 视频：15-3 理论实操：JS中打开与关闭浏览器的方法(07:49)
• 视频：15-4 理论实操：window常用属性与特性(09:31)
• 视频：15-5 练习：如何让自己的百度百科点击量突破5w？-练习需求(02:03)
• 视频：15-6 练习：如何让自己的百度百科点击量突破5w？-练习解析(04:28)

第16章 案例12：打字机效果-JS中的基础操作【JavaScript篇】

• 视频：16-1 理论实操：JS中的基本运算(08:44)
• 视频：16-2 理论实操：JS中字符串运算与拼接(09:47)
• 视频：16-3 理论实操：JS中的递增与递减(06:37)
• 视频：16-4 理论实操：JS中的计算BUG(06:04)
• 视频：16-5 理论实操：布尔值的基础操作(08:18)
• 视频：16-6 练习：打字机效果 – 需求(04:35)
• 视频：16-7 练习：打字机效果 – 解析(06:38)

第17章 案例13、14：广告弹窗效果【DOM基础操作】【JavaScript篇】

• 视频：17-1 理论实操：document对象与点击事件(12:09)
• 视频：17-2 理论实操：js中选取元素的方式(18:23)
• 视频：17-3 理论实操：js中控制元素样式的方式(11:09)
• 视频：17-4 理论实操：js中控制元素常见属性(16:17)
• 视频：17-5 案例实战：改变链接的指向实操 – 需求(02:11)
• 视频：17-6 案例实战：改变链接的指向实操 – 解析(14:51)
• 视频：17-7 案例实战：广告弹窗效果 – 需求(02:33)
• 视频：17-8 案例实战：广告弹窗效果 – 解析(12:40)
• 视频：17-9 练习：使用JS给予相应的样式 – 需求(02:23)
• 视频：17-10 练习：使用JS给予相应的样式 – 解析(10:23)

第18章 案例15：用户名密码的登陆框案例【JS流程控制】【JavaScript篇】

• 视频：18-1 案例分析：项目的整体的分析与制作思路(03:42)
• 视频：18-2 第一步：运用js中的if判断语句实现登陆判断(20:59)
• 视频：18-3 第二步：运用 js中“与”方法进行判断(09:16)
• 视频：18-4 第三步：运用js中“或”方法进行判断(08:37)
• 视频：18-5 第四步：完成用户名密码的登陆框(11:24)

第19章 案例16：前端选项卡案例【JS流程控制】【JavaScript篇】

• 视频：19-1 案例分析：选项卡的制作思路分析(03:34)
• 视频：19-2 理论实操：理解js中的for语句(17:02)
• 视频：19-3 理论实操：js控制元素的class方法(12:19)
• 视频：19-4 理论实操：理解js中this对象与对象属性【重点】(15:20)
• 视频：19-5 实战练习：前端选项卡的制作(16:30)
• 视频：19-6 理论实操：js中switch语法的使用方法(07:50)

第20章 案例17、18：留言板效果案例【JavaScript篇】

• 视频：20-1 案例分析：留言板效果分析与思路(03:53)
• 视频：20-2 理论实操：js获取父、子节点、子元素方法【重点】(12:38)
• 视频：20-3 理论实操：js生成及插入元素的方法【重点】(16:17)
• 视频：20-4 理论实操：js删除及替换元素方法【重点】(10:57)
• 视频：20-5 理论实操：js控制内容的方法【重点】(08:10)
• 视频：20-6 实战：留言板效果制作-1(15:34)
• 视频：20-7 实战：留言板效果制作-2(11:15)
• 视频：20-8 实战：留言板效果制作-3(16:04)
• 视频：20-9 练习：星级评分效果的实现-需求(02:49)
• 视频：20-10 练习：星级评分效果的实现-解析(24:54)

第21章 案例19：模拟短信发送案例【JS事件操作】【JavaScript篇】

• 视频：21-1 理论实操：js中鼠标双击、移入事件(06:43)
• 视频：21-2 理论实操：js中鼠标移出、内部移动事件(05:57)
• 视频：21-3 理论实操：js中鼠标右键、按下抬起事件(09:08)
• 视频：21-4 理论实操：js中事件捕获与冒泡机制(07:00)
• 视频：21-5 理论实操：JS事件中的事件对象(12:50)
• 视频：21-6 理论实操：JS中阻止事件冒泡与默认行为(14:41)
• 视频：21-7 理论实操：js中输入框获取焦点、失去焦点、内容改变事件(07:40)
• 视频：21-8 练习：模拟短信发送效果-需求(01:54)
• 视频：21-9 练习-模拟短信发送的效果-解析(12:53)

第22章 案例20：web便签拖拽效果【JavaScript篇】

• 视频：22-1 案例分析：Web便签拖拽效果的需求分析(03:24)
• 视频：22-2 第一步：理解元素可见宽度与高度属性(09:05)
• 视频：22-3 第二步：理解元素元素边缘距离属性(08:55)
• 视频：22-4 第三步：简易元素拖拽效果实现(08:46)
• 视频：22-5 第四步：元素拖拽效果完整实现(13:08)
• 视频：22-6 实战练习：web便签拖拽效果实现(24:01)

第23章 案例21：简易文字查询修改器【字符串方法集】【JavaScript篇】

• 视频：23-1 理论实操：字符串连接、大小写转换方法(05:25)
• 视频：23-2 理论实操：查找索引、替换内容方法(09:30)
• 视频：23-3 理论实操：去掉空格、字符串转数组方法(09:09)
• 视频：23-4 理论实操：字符串截取方法(08:41)
• 视频：23-5 练习：简易文字查询修改器-需求(03:38)
• 视频：23-6 练习：简易文字查询修改器 – 解析（1）(17:42)
• 视频：23-7 练习：简易文字查询修改器 – 解析（2）(19:45)

第24章 案例22：元素拖拽回放效果【数组方法合集】【JavaScript篇】

• 视频：24-1 理论实操：查询连接、倒叙方法(12:01)
• 视频：24-2 理论实操：数组转字符串、数组截取方法(09:30)
• 视频：24-3 理论实操：数组基础方法(08:32)
• 视频：24-4 理论实操：数组万能、排序方法(09:56)
• 视频：24-5 理论实操：数组循环方法(10:10)
• 视频：24-6 实战：元素拖拽回放效果 – 需求(01:27)
• 视频：24-7 实战：元素拖拽回放-解析(13:54)

第25章 案例23：购物车效果【JSON对象数据】【JavaScript篇】

• 视频：25-1 初识：初识JSON数据对象(08:32)
• 视频：25-2 方法：JSON转字符串方法(09:00)
• 视频：25-3 方法：字符串转JSON方法(06:51)
• 视频：25-4 属性：属性操作-in 与 删除属性(09:21)
• 视频：25-5 循环：属for-in循环(05:05)
• 视频：25-6 实战：购物车效果 – 需求(02:25)
• 视频：25-7 实战：购物车效果 – 解析（1）(17:57)
• 视频：25-8 实战：购物车效果 – 解析（2）(17:00)
• 视频：25-9 实战：购物车效果 – 解析（3）(14:00)

第26章 案例24：事件委托版拖拽效果【事件深入】【JS进阶篇】

• 视频：26-1 监听：js中事件监听原理(10:34)
• 视频：26-2 委托：js中事件委托原理(12:03)
• 视频：26-3 兼容：js中事件监听兼容原理(09:33)
• 视频：26-4 实战：事件委托版拖拽 – 需求(01:05)
• 视频：26-5 事件委托版拖拽 – 解析(07:52)
• 视频：26-6 经验分享：滚动事件是如何发生的？(09:23)

第27章 案例25：网页随机抽奖效果【JS常用全局方法】【JS进阶篇】

• 视频：27-1 方法实操：eval(05:02)
• 视频：27-2 方法实操：parseInt、parseFloat(09:09)
• 视频：27-3 方法实操：随机数、三目运算符、isNaN(10:05)
• 视频：27-4 练习：网页随机抽奖效果-需求(01:16)
• 视频：27-5 练习：网页随机抽奖效果 – 解析(19:26)

第28章 加油站：JavaScript中对象理解【JS进阶篇】

• 视频：28-1 理论讲解：js中对象理解 – 不等性(08:15)
• 视频：28-2 理论讲解：js中对象理解 – 私有属性(05:43)
• 视频：28-3 理论进阶：js中对象理解 – new方法(06:37)
• 视频：28-4 理论进阶：js中对象理解 – 引用机制(11:41)
• 视频：28-5 理论讲解：js中对象理解 – 类及获取数据中类的方法(07:59)
• 视频：28-6 理论进阶：js中对象理解 – 原型(09:41)
• 视频：28-7 理论进阶：js中对象理解 – 原型链(08:04)

第29章 加油站：javascript中面向对象【JS进阶篇】

• 视频：29-1 理论实操：this指向(07:22)
• 视频：29-2 理论实操：改变this指向 – call(07:20)
• 视频：29-3 理论实操：改变this指向 – apply(07:29)
• 视频：29-4 理论实操：改变this指向 – bind(04:58)
• 视频：29-5 理论实操：原型继承(09:26)
• 视频：29-6 理论实操：属性继承(10:38)

第30章 案例26：面向对象版拖拽封装案例【面向对象模块化封装】【JS进阶篇】

• 视频：30-1 概念：JS的模块化开发概念(08:59)
• 视频：30-2 概念：JS模块化选择器模块化优化封装(17:59)
• 视频：30-3 封装：JS模块化方法使用优化封装(07:36)
• 视频：30-4 封装：JS模块化链式操作封装(07:39)
• 视频：30-5 综合实战：面向对象版拖拽封装-需求(03:55)
• 视频：30-6 综合实战：面向对象版拖拽封装-解析(1)(15:22)
• 视频：30-7 综合实战：面向对象版拖拽封装-解析(2)(13:15)

第31章 案例27： 封装面向对象版选项卡【javascript模块化】【JS进阶篇】

• 视频：31-1 案例分析：面向对象版选项卡 – 需求(07:07)
• 视频：31-2 第一步：头部点击按钮封装(19:36)
• 视频：31-3 第二步：下方内容部分封装(19:36)
• 视频：31-4 第三步：点击切换事件封装(10:18)
• 视频：31-5 第四步：自动播放模块封装(13:05)
• 视频：31-6 第五步：切换颜色模块封装-1(14:47)
• 视频：31-7 第五步：切换颜色模块封装-2(11:33)
• 视频：31-8 第五步：切换颜色模块封装-3(11:38)

第32章 案例28：仿唯品会官网首页制作【布局篇】【PC端综合实战】

• 视频：32-1 PC网页布局分析：电商官网首页布局分析与思路(04:03)
• 视频：32-2 第一步：制作头部导航内容(24:00)
• 视频：32-3 第二步：制作logo搜索框内容(1)(17:29)
• 视频：32-4 第二步：制作logo搜索框内容(2)(19:19)
• 视频：32-5 第三步：制作商品分类及购买导航部分(15:34)
• 视频：32-6 第四步：制作首页轮播图部分(24:49)
• 视频：32-7 第五步：广告专区模块制作(18:54)
• 视频：32-8 第六步：每日必看专区模块制作(1)(27:22)
• 视频：32-9 第六步：每日必看专区模块制作(2)(26:43)
• 视频：32-10 第六步：每日必看专区模块制作(3)(16:31)
• 视频：32-11 第七步：底部导航模块制作(27:16)
• 视频：32-12 第八步：尾部链接模块制作(1)(17:07)
• 视频：32-13 第八步：尾部链接模块制作(2)(15:59)
• 视频：32-14 第九步：右侧跟随模块制作(27:51)

第33章 案例28：仿唯品会官网首页制作【JS效果篇】【PC端综合实战】

• 视频：33-1 PC网页交互分析：唯品会官网首页交互分析与思路(04:04)
• 视频：33-2 第一步：城市选择模块JS部分制作-1(19:35)
• 视频：33-3 第一步：城市选择模块JS部分制作-2(19:21)
• 视频：33-4 第一步：城市选择模块JS部分制作-3(20:11)
• 视频：33-5 第一步：城市选择模块JS部分制作-4(24:33)
• 视频：33-6 -1 第二步：右侧导航触碰效果制作(18:59)
• 视频：33-7 -2 第二步：右侧导航触碰效果制作(19:18)
• 视频：33-8 -3 第二步：右侧导航触碰效果制作(19:22)
• 视频：33-9 -4 第二步：右侧导航触碰效果制作(15:12)
• 视频：33-10 -5 第二步：右侧导航触碰效果制作(21:07)
• 视频：33-11 -6 第二步：右侧导航触碰效果制作(13:34)
• 视频：33-12 第三步：商品分类内容效果制作-1(20:09)
• 视频：33-13 第三步：商品分类内容效果制作-2(21:24)
• 视频：33-14 第三步：商品分类内容效果制作-3(16:27)
• 视频：33-15 第四步：滚动吸顶条模块制作(19:52)
• 视频：33-16 第五步：点击加载瀑布流效果制作(17:23)
• 视频：33-17 第六步：右侧跟随模块的账号购物袋效果制-1(20:26)
• 视频：33-18 第六步：右侧跟随模块的账号购物袋效果制-2(22:01)
• 视频：33-19 项目综合总结(07:25)

第34章 案例29：炫酷时钟案例-前端HTML5 + CSS3【进阶】

• 视频：34-1 概念：到底什么是html5？又什么是css3呢？(01:59)
• 视频：34-2 圆角：CSS3的圆角样式(06:13)
• 视频：34-3 阴影：CSS3的阴影样式(09:04)
• 视频：34-4 过渡：CSS3的过渡样式(09:12)
• 视频：34-5 缩放：CSS3的变形 – 缩放样式(08:23)
• 视频：34-6 平移：CSS3的变形 – 平移样式(07:18)
• 视频：34-7 旋转：CSS3的变形 – 旋转样式(10:30)
• 视频：34-8 扭曲：CSS3的变形 – 扭曲样式(06:56)
• 视频：34-9 变形：CSS3的变形中心点样式(07:36)
• 视频：34-10 练习：CSS3模拟时钟 – 需求(05:00)
• 视频：34-11 练习：CSS3模拟时钟 – 解析(25:01)

第35章 案例30：3d盒子的制作【CSS3进阶】

• 视频：35-1 案例分析：3d盒子的内容解析与思路(04:29)
• 视频：35-2 第一步：景深样式学习(07:42)
• 视频：35-3 第二步：变形样式 – z轴样式(09:21)
• 视频：35-4 第三步：3d盒子制作(21:25)
• 视频：35-5 经验分享：变形样式顺序(08:53)
• 视频：35-6 实战：3d书籍翻页效果 – 需求(02:17)
• 视频：35-7 实战：3d书籍翻页效果 – 解析 -第一部分 -翻页效果制作-1(18:27)
• 视频：35-8 实战：3d书籍翻页效果 – 解析 -第一部分 -翻页效果制作-2(18:39)
• 视频：35-9 实战：3d书籍 – 第二部分 – 翻页页面内容(52:01)
• 视频：35-10 实战：3d书籍 – 第三部分 -中心静态文字及左下角的动态效果-1(19:29)
• 视频：35-11 实战：3d书籍 – 第三部分 -中心静态文字及左下角的动态效果-2(11:27)
• 视频：35-12 实战：3d书籍页面内容动画效果-1(20:41)
• 视频：35-13 实战：3d书籍页面内容动画效果-2(20:52)
• 视频：35-14 实战：3d书籍页面内容动画效果-3(21:01)
• 视频：35-15 实战：3d书籍页面内容动画效果-4(24:31)

第36章 知识加油站：CSS3新增选择器系列【CSS3进阶】

• 视频：36-1 理论实操：相邻、兄弟选择器(08:53)
• 视频：36-2 理论实操：指定、子元素选择器(10:14)
• 视频：36-3 理论实操：属性选择器(11:54)
• 视频：36-4 理论实操：高亮选择器(07:09)
• 视频：36-5 理论实操：非内容、禁用选择器(10:03)
• 视频：36-6 经验分享：伪元素与伪类(05:45)

第37章 案例31：自定义视频播放器【HTML5进阶】

• 视频：37-1 案例分析：自定义视频播放器解析与思路(04:33)
• 视频：37-2 第一步：了解认识HTML5视频标签(13:01)
• 视频：37-3 第二步：html5视频播放器API解析(13:43)
• 视频：37-4 第三步：自定义视频播放器布局制作(16:30)
• 视频：37-5 第四步：自定义视频播放器全屏功能(08:08)
• 视频：37-6 第五步：自定义视频播放器声音控制功能(20:32)
• 视频：37-7 第六步：自定义视频播放器进度条控制功能（1）(15:26)
• 视频：37-8 第七步：自定义视频播放器功能优化（1）(15:01)
• 视频：37-9 第七步：自定义视频播放器功能优化（2 ）(16:33)

第38章 案例32：网页钢琴效果制作【HTML5进阶】

• 视频：38-1 案例分析：网页钢琴效果解析(02:48)
• 视频：38-2 第一步：认识HTML5音频标签(06:52)
• 视频：38-3 第二步：钢琴效果制作(24:19)
• 视频：38-4 经验分享：JS新增query选择器的使用(12:27)

第39章 案例33：移动端布局【移动端】

• 视频：39-1 认知：了解认识移动端(06:41)
• 视频：39-2 计算单位：屏幕单位、计算样式(10:09)
• 视频：39-3 响应式：响应式布局学习及使用方式(09:24)
• 视频：39-4 REM应用：REM单位学习(09:32)
• 视频：39-5 REM算法：REM算法原理介绍(14:10)
• 视频：39-6 练习：移动端页面制作（1）(25:23)
• 视频：39-7 练习：移动端页面制作（2）(22:03)
• 视频：39-8 练习：移动端页面制作（3）(20:40)

第40章 案例34：弹性盒子【移动端】

• 视频：40-1 概念：弹性盒子布局概念(09:18)
• 视频：40-2 方法：弹性盒子分块、分层样式(12:00)
• 视频：40-3 方法：弹性盒子轴线、交叉轴样式(10:04)
• 视频：40-4 方法：弹性盒子内容排序、比例缩小(07:08)
• 视频：40-5 方法：多轴线对齐方式、项目上下对齐方式(07:27)
• 视频：40-6 弹性盒子实战：慕课网首页课程展示布局(20:22)
• 视频：40-7 弹性盒子实战：慕课网首页榜单制作（1）(15:22)
• 视频：40-8 弹性盒子实战：慕课网首页榜单制作（2）(08:40)

第41章 案例35：慕课网移动端首页制作【布局】【移动端网页】

• 视频：41-1 案例分析：慕课网移动端首页解析(05:12)
• 视频：41-2 第一步：头部导航模块制作(14:55)
• 视频：41-3 第二步：内容导航模块制作(08:29)
• 视频：41-4 第三步：轮播图模块制作(14:47)
• 视频：41-5 第四步：实战推荐模块制作(1)(20:05)
• 视频：41-6 第四步：实战推荐模块制作（2）(21:44)
• 视频：41-7 第五步：体系课模块制作(13:05)
• 视频：41-8 第六步：学习路线模块制作（1）(15:29)
• 视频：41-9 第六步：学习路线模块制作（2）(16:24)
• 视频：41-10 第七步：慕课专栏模块制作(26:53)
• 视频：41-11 第八步：新上好课模块制作(11:02)
• 视频：41-12 第九步：课程精选模块制作(10:11)
• 视频：41-13 第十步：精英讲师模块制作(21:11)
• 视频：41-14 第十一步：猜你喜欢模块制作(15:48)

第42章 案例36：慕课网移动端首页制作【js部分】【移动端网页】

• 视频：42-1 第一步：轮播图模块效果制作(23:55)
• 视频：42-2 第二步：慕课专栏效果制作(15:26)
• 视频：42-3 第三步：滚动时内容吸顶条与底部内容显示效果(18:00)
• 视频：42-4 第四步：精英讲师效果制作(23:30)
• 视频：42-5 项目综合总结(04:34)

第43章 案例37：前后台交互AJAX 【后台交互】

• 视频：43-1 定义：什么是前后台交互？(08:40)
• 视频：43-2 原理：AJAX对象的基本原理(06:48)
• 视频：43-3 AJAX对象的GET请求方式(24:59)
• 视频：43-4 方法：AJAX对象的POST请求方式(20:59)
• 视频：43-5 含义：AJAX及HTTP状态码含义(14:26)
• 视频：43-6 封装：封装AJAX函数(20:49)
• 视频：43-7 实操：在线翻译接口的使用 – 需求(03:07)
• 视频：43-8 实操：在线翻译接口的使用 – 解析(11:36)

第44章 案例38：其他交互方式【后台交互】

• 视频：44-1 表单请求：form表单get发送(09:18)
• 视频：44-2 表单请求：form表单post发送(05:52)
• 视频：44-3 对象请求：fetch对象的get请求(14:47)
• 视频：44-4 对象请求：fetch对象的post请求(11:59)
• 视频：44-5 跨域原理：jsonp跨域请求原理(17:23)
• 视频：44-6 实战：360搜索栏下拉菜单实现剖析(10:18)

第45章 知识加油站：Axios库学习【后台交互】

• 视频：45-1 基础：Axios库的基本使用方式【重点】(11:28)
• 视频：45-2 方式：Axios库的post请求方式(09:15)
• 视频：45-3 请求：Axios库的并发请求(09:39)

第46章 案例39、40：慕课网移动端首页数据交互实战【JS部分】【移动端后台交互】

• 视频：46-1 第一步：注册登录页面制作（1）(17:30)
• 视频：46-2 第一步：注册登录页面制作（2）(16:50)
• 视频：46-3 第二步：搜索页面制作（1）(25:06)
• 视频：46-4 第二步：搜索页面制作（2）(22:31)
• 视频：46-5 第二步：搜索页面制作（3）(24:55)
• 视频：46-6 第三步：注册登录数据交互接口部分制作（1）(13:09)
• 视频：46-7 第三步：注册登录数据交互接口部分制作（2）(09:59)
• 视频：46-8 第三步：注册登录数据交互接口部分制作（3）(13:09)
• 视频：46-9 第三步：注册登录数据交互接口部分制作（4）(13:50)
• 视频：46-10 第四步：搜索页面制作数据交互接口结果内部制作（1）(12:03)
• 视频：46-11 第四步：搜索页面制作数据交互接口结果内部制作（2）(24:18)

第47章 课程总结

• 视频：47-1 前端下一步必要学习内容前瞻(05:51)
• 视频：47-2 前端整体成长知识体系和路径(06:08)
• 图文：47-3 前端技能推荐学习路径与课程
• 视频：47-4 课程整体总结