• 21h

    课程时长

  • 无限期

    有效期

  • 1681

    学习人数

课程参数
学前基础要求
1.具备HTML和CSS基础编程能力 2.具备一定的JS基础知识

课程简介

本课程主要讲解H5中添加的丰富多彩的标签、表单以及多媒体,带领学员进入绚丽多彩的H5世界;同时也会讲述CSS3的前世今生,CSS3是CSS2的“进化”版本,在CSS2基础上,讲解CSS3增强或新增的众多特性以及相比CSS2的优势,让学员深刻体会CSS3对于Web开发的效率和便捷性的促进作用。

适合人群

1. 适合有HTML和CSS基础的同学

2.掌握一定的JS基础知识的同学

课程亮点

1.案例驱动,知识点由浅入深进行学习

2.知识内容全面,覆盖面广,可在多业务场景下应用

主讲内容

第一章 HTML5新增元素介绍和使用

01-HTML5CSS3-阶段任务说明

02-HTML5-什么是HTML5

03-HTML5-语义化标签的使用

04-HTML5-语义化标签的兼容性处理

05-HTML5-表单新增的type属性

06-HTML5-表单新增的其它属性

07-HTML5-表单新增元素(datalist)

08-HTML5-表单新增元素(keygen+output)

09-HTML5-新增的表单事件

10-HTML5-进度条

11-HTML5-表单总结案例

12-HTML5-音频和视频

12-HTML5-音频和视频标签的使用

13-HTML5-获取DOM元素

14-HTML5-操作元素类样式

15-HTML5-自定义属性

第二章 HTML5新增API介绍和使用

01-HTML5-网络监听接口

02-HTML5-全屏接口的使用

03-HTML5-FileReader的使用

04-HTML5-拖拽接口使用(上)

05-HTML5-拖拽接口使用(中)

06-HTML5-拖拽接口使用(下)

07-HTML5-地理定位接口(上)

08-HTML5-地理定位接口(下)

09-HTML5-Web存储_localStorage

10-HTML5-Web存储_sessionStorage

11-HTML5-应用程序缓存

12-HTML5-自定义播放器(接口说明与界面说明)

13-HTML5-自定义播放器(播放与暂停)

14-HTML5-自定义播放器(播放过程业务逻辑处理)

15-HTML5-自定义播放器(跳播和播放结束业务处理)

第三章 CSS3新增属性介绍

01-HTML5-CSS3简介

02-HTML5-属性选择器

03-HTML5-兄弟伪类

04-HTML5-相对于父元素的结构伪类

05-HTML5-伪类样式target

06-HTML5-伪元素(before after)

07-HTML5-其它伪元素的使用

08-HTML5-颜色模式之RGB

09-HTML5-颜色模式之HSL

10-HTML5-HTML5中两种颜色设置的方式

11-HTML5-文件阴影

12-HTML5-盒模型

13-HTML5-边框圆角

14-HTML5-案例-andorid机器人

15-HTML5-边框阴影

第四章 CSS3新增background相关属性介绍和使用

01-HTML5-线性渐变

02-HTML5-径向渐变

03-HTML5-重复渐变

04-HTML5-background(上)

05-HTML5-background(中)

06-HTML5-background(backgroundSize案例)

07-HTML5-background(下)

08-HTML5-边框图片(上)

09-HTML5-边框图片(中)

10-HTML5-边框图片(案例)

第五章CSS3新增过渡和转换属性介绍和使用

01-HTML5-过渡

02-HTML5-过渡案例-手风琴菜单

03-HTML5-transform2D转换(translate)

04-HTML5-transform2D转换(scale)

05-HTML5-transform2D转换(rotate)

06-HTML5-transform2D转换(skew)

07-HTML5-transform-origin

08-HTML5-同时添加多个transform属性值

09-HTML5-实现任意元素居中

第六章CSS3 3D效果

01-HTML5-3d移动

02-HTML5-3d缩放

03-HTML5-3d旋转

第七章 CSS3动画效果和案例实现

01-HTML5-立方体(上)

02-HTML5-立方体(下)

03-HTML5-3d变换(景深透视)

04-HTML5-动画(创建动画)

05-HTML5-动画的属性设置

06-HMLT5-动画案例-无缝滚动

07-HTML5-时钟案例-结构分析

08-HTML5-时钟案例-钟表结构代码实现

09-HTML5-时钟案例-时钟案例动画添加

10-HTML5-web字体

11-HTML5-字体图标

第八章 CSS3 Flex

01-HTML5-多列布局

02-HTML5-传统布局方式的局限

03-HTML5-伸缩盒子的属性-justify-content

04-HTML5-伸缩盒子的属性-flex-flow

05-HTML5-伸缩盒子的属性-flex-grow

06-HTML5-伸缩盒子的属性-flex-shink

07-HTML5-伸缩盒子的属性-flex

08-HTML5-伸缩盒子的flex属性的应用案例

09-HTML5-伸缩盒子的align-items属性

10-HTML5-伸缩盒子案例-宽高自动适应

第九章 携程网案例

01-HTML5-今天任务说明

02-HTML5-携程网页面结构分析

03-HTML5-携程网页面结构代码实现

04-HTML5-携程网页面样式添加(上)

05-HTML5-携程网页面样式添加(下)

第十章 切割轮播图案例

01-HTML5-切割轮播图结构分析

02-HTML5-切割轮播图结构样式实现(上)

03-HTML5-切割轮播图结构样式实现(下)

04-HTML5-切割轮播图功能实现

第十一章360案例

01-HTML5-360案例-全屏插件的简单介绍

02-HTML5-360案例-过渡和动画效果执行的时机

03-HTML5-360案例-第一屏内容的添加

04-HTML5-360案例-第一屏过渡效果的添加

05-HTML5-360案例-第二屏制作

06-HTML5-360案例-第三屏制作

07-HTML5-360案例-第四屏制作(上)

08-HTML5-360案例-第四屏制作(下)

实战项目

携程网案例

携程网是一个专业的旅游平台。从项目部局分析可知,该项目应用flex技术进行整个页面的布局;完成项目的过程中,进行整体知识点的梳理和应用讲解,让学员在实践中深刻理解知识点的应用。

学完收获

1.了解H5的新增标签

2.熟练运用CSS3的新属性

3.能够做出各种酷炫的动画效果

4.通过插件实面页面的开发应用。

师资团队
  • 前端高级讲师
    高级讲师
    前端开发工程师和软件开发工程师, 具有多年软件开发项目经验,曾就职于某大型外企,在软件开发和培训方面积累了丰富的经验,精通Ajax、Linux、ThinkPHP、Yii、SVN、jQuery、Redis、Mysql、XML等,上课语言幽默,逻辑清晰。