课程简介

本课程以项目实战为核心，通过4个实际商业项目的深度讲解剖析，让你掌握HTML5和CSS3知识体系及UI设计、经典布局等必备技能，教学内容主要涉及：HTML5的布局和框架、表单、视频和音频、Canvas、Web 存储、可编辑内容、拖放等，课程将会带你感受真实的HTML5+CSS3开发场景，推荐希望零基础转行前端工程师的同学学习

章节目录：

• 1、课程：H5搭建第一个商业化主页（上)
• 1.1开课漫谈
• 1.2课程介绍
• 1.3前端工程师的职业发展
• 1.4开发环境配置（一）
• 1.5开发环境配置（二）
• 1.6HTML5+CSS3知识体系（一）
• 1.7HTML5+CSS3知识体系（二）
• 1.8HTML江湖
• 1.9块状元素与内联元素
• 1.10浮动和定位（一）
• 1.11浮动和定位（二）
• 1.12制作一个导航栏（一）
• 1.13制作一个导航栏（二）
• 1.14导航栏的举一反三（一）
• 1.15导航栏的举一反三（二）

-

• 2、课程：H5搭建第一个商业化主页（下）
• 2.1主页的需求分析和设计（一）
• 2.2主页的需求分析和设计（二）
• 2.3HTML搭建（一）
• 2.4HTML搭建（二）
• 2.5Header部分CSS（一）
• 2.6Header部分CSS（二）
• 2.7Header部分CSS（三）
• 2.8Header部分CSS（四）
• 2.9Header部分CSS（五）
• 2.10Header部分CSS（六）
• 2.11Banner部分CSS
• 2.12Content部分CSS （一）
• 2.13Content部分CSS （二）
• 2.14Content部分CSS （三）
• 2.15Content部分CSS （四）
• 2.16Content部分CSS （五）
• 2.17Footer部分CSS（一）
• 2.18Footer部分CSS（二）
• 资料

-

• 3、课程：HTML5简介、布局、框架和表单
• 3.1HTML简介（一）
• 3.2HTML简介（二）
• 3.3XHTML简介
• 3.4HTML5简介（一）
• 3.5HTML5简介（二）
• 3.6HTML5的文档结构（一）
• 3.7HTML5的文档结构（二）
• 3.8HTML5的文档结构（三）
• 3.9元素分类：结构性、级块性、行内语义性、交互性元素
• 3.10构建主体内容
• 3.11添加语义模块
• 3.12用HTML5改造页面
• 3.13表单-input类型
• 3.14HTML5支持的input类型（一）
• 3.15HTML5支持的input类型（二）
• 3.16Input的新增属性
• 3.17Form的新增属性

-

• 4、课程：音频、视频与画布
• 4.1音频编解码（一）
• 4.2音频编解码（二）
• 4.3浏览器支持情况
• 4.4播放音频
• 4.5用JS控制音乐
• 4.6视频编解码
• 4.7浏览器支持情况
• 4.8播放视频
• 4.9Canvas简介
• 4.10绘制图形（一）
• 4.11绘制图形（二）
• 4.12绘制曲线
• 4.13图形变换（一）
• 4.14图形变换（二）
• 4.15图形变换（三）
• 4.16图形组合与裁切
• 4.17绘制图像
• 4.18绘制文字
• 资料

-

• 5、课程：Web存储、拖放
• 5.1简述
• 5.2本地存储、cookie vs Web Storage（一）
• 5.3本地存储、cookie vs Web Storage（二）
• 5.4浏览器支持情况（一）
• 5.5浏览器支持情况（二）
• 5.6Local Storage的使用
• 5.7Session Storage兼容性
• 5.8Web Storage事件
• 5.9示例一：网页皮肤
• 5.10示例二：跟踪Local Storsge数据（一）
• 5.11示例二：跟踪Local Storsge数据（二）
• 5.12示例二：跟踪Local Storsge数据（三）
• 5.13示例二：跟踪Local Storsge数据（四）
• 5.14WebSQL数据库
• 5.15示例三：访问数据库
• 5.16可编辑区域
• 5.17拖拽
• 资料

-

• 6、课程：CSS3介绍、选择器、权重计算
• 6.1简述
• 6.2CSS发展史
• 6.3CSS基础知识（一）
• 6.4CSS基础知识（二）
• 6.5标签选择器
• 6.6ID选择器
• 6.7类选择器
• 6.8伪类选择器（一）
• 6.9伪类选择器（二）
• 6.10伪对象选择器
• 6.11属性选择器
• 6.12属性选择器
• 6.13分组选择器和通用选择器
• 6.14选择器的应用哲学
• 6.15演示文档的引用
• 6.16权重计算
• 6.17CSS属性缩写（一）
• 6.18CSS属性缩写（二）
• 6.19CSS单位
• 资料

-

• 7、课程：盒子模型、浮动、定位、经典布局（上）
• 7.1简介
• 7.2什么是盒子模型
• 7.3非块元素的盒模型
• 7.4外边距
• 7.5行内元素的外边距
• 7.6块状元素、浮动元素、绝对元素的外边距
• 7.7内边距及其性质
• 7.8边框、宽和高、IE5.5中的宽和高
• 7.9网页布局的一般问题及三种基本形式
• 7.10浮动（一）
• 7.11浮动（二）
• 7.12浮动元素的大小
• 7.13浮动元素的位置
• 7.14环绕与清除浮动
• 资料

-

• 8、课程：盒子模型、浮动、定位、经典布局（下）
• 8.1水平错位问题、定位
• 8.2静态定位、绝对定位
• 8.3相对定位、固定定位
• 8.4定位的参照对象–包含块
• 8.5利用包含块达到窗口居中效果
• 8.6绝对定位中的坐标值
• 8.7定位层叠、相对定位的坐标值
• 8.8IE6中select控件的bug
• 8.9嵌套层叠
• 8.10层叠包含框
• 8.11兼容IE和非IE的嵌套层叠问题
• 8.12示例
• 资料

-

• 9、课程：文字、图片背景、变形
• 9.1简述
• 9.2字体类型、大小
• 9.3字体颜色、粗细、斜体
• 9.4字体修饰、对齐方式、字间距、行间距、词间距、缩进
• 9.5图片边框、大小
• 9.6图片的横向、纵向对齐
• 9.7文字环绕图片、背景颜色、背景图片
• 9.8列表项符号、列表项图片符号
• 9.9文字阴影
• 9.10文字溢出、颜色与透明
• 9.11形变、Transform
• 9.12旋转、平移、缩放、倾斜
• 9.13定义复杂形变

-

• 10、课程：第十讲 项目实战（上）
• 10.1简介
• 10.2怎么实现动画（一）
• 10.3怎么实现动画（二）
• 10.4做一个有动画的网页
• 10.5技术栈
• 10.6响应式布局
• 10.7创建网页引用框架（一）
• 10.8创建网页引用框架（二）
• 10.9导航条HTML编写（一）
• 10.10导航条HTML编写（二）
• 10.11导航条CSS编写（一）
• 10.12导航条CSS编写（二）
• 10.13导航条logo、电话动态画编写
• 10.14导航条菜单动画编写（一）
• 10.15导航条菜单动画编写（二）
• 10.16导航条响应式布局（一）
• 10.17导航条响应式布局（二）
• 10.18导航条响应式布局（三）
• 资料

-

• 11、课程：项目实战（下）
• 11.1Banner HTML编写.mp4
• 11.2Banner CSS编写（一）.mp4
• 11.3Banner CSS编写（二）.mp4
• 11.4Banner 动画编写.mp4
• 11.5Banner 响应式布局.mp4
• 11.6Welcome部分HTML编写.mp4
• 11.7Welcome部分CSS编写.mp4
• 11.8Figure部分HTML编写.mp4
• 11.9Figure部分CSS编写（一）.mp4
• 11.10Figure部分CSS编写（二）.mp4
• 11.11Figure部分CSS编写（三）.mp4
• 11.12Service部分HTML编写.mp4
• 11.13Service部分CSS编写（一）.mp4
• 11.14Service部分CSS编写（二）.mp4
• 11.15总结.mp4

上课笔记.url

资料.rar