-
21h
课程时长
-
无限期
有效期
-
1927人
学习人数
课程参数 | |
学前基础要求
|
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等,上课语言幽默,逻辑清晰。