单元1 响应式和HTML5+CSS3初体验

【教学导航】

响应式Web设计简介

【项目1-1】使用HTML5+CSS3绘制HTML5的logo

【项目描述】

【前导知识】

HTML5的新特性

HTML5的基本语法

CSS3的新特性

如何在HTML中引入样式表

CSS3与浏览器

【项目分析】

【代码实现】

【项目总结】

【项目1-2】构建移动版旅游网站页面

【项目描述】

【前导知识】

HTML5语义化结构标签

CSS选择器

盒子模型

CSS的浮动与定位

【项目分析】

【代码实现】

【项目总结】

单元2 文本类网页设计

【教学导航】

【项目2-1】电子杂志页面

【项目描述】

【前导知识】

HTML5中常用的文本标签

CSS的字体样式属性

多列布局

【项目分析】

【代码实现】

【项目总结】

【项目2-2】软文推广页面

【项目描述】

【前导知识】

CSS的文本外观属性

CSS的层叠性、继承性和重要性

CSS的优先级

Web字体图标—font-awesome的应用

【项目分析】

【代码实现】

【项目总结】

【项目2-3】手机邮箱导航页面

【项目描述】

【前导知识】

CSS链接属性

CSS导航栏

【项目分析】

【代码实现】

【项目总结】

单元3 图文展示网页设计

【教学导航】

【项目3-1】黑马书城

【项目描述】

【前导知识】

HTML5常用图像标签

CSS背景设置

CSS阴影和渐变

【项目分析】

【代码实现】

【项目总结】

【项目3-2】多肉植物商城

【项目描述】

【前导知识】

CSS3的圆角边框

CSS3的过渡（CSS3 transition）

CSS3变形（CSS3 transform）

【项目分析】

【代码实现】

【项目总结】

【项目3-3】摇晃的桃子

【项目描述】

【前导知识】

CSS3动画（CSS3 animations）

CSS精灵技术（CSS Sprites）

【项目分析】

【代码实现】

【项目总结】

单元4 HTML5表单的应用

【教学导航】

【项目4-1】移动版登录页面

【项目描述】

【前导知识】

介绍表单

HTML5＜input＞标签

【项目分析】

【代码实现】

【项目总结】

【项目4-2】用户注册页面

【项目描述】

【前导知识】

其他表单标签

HTML5表单验证

【项目分析】

【代码实现】

【项目总结】

单元5 HTML5画布

【教学导航】

【项目5-1】网页涂鸦板

【项目描述】

【前导知识】

JavaScript的那些事

初识canvas

【项目分析】

【代码实现】

【项目总结】

【项目5-2】发红包才能看的照片

【项目描述】

【前导知识】

canvas绘制矩形和清除矩形

canvas绘制圆形

canvas绘制图片

canvas中的其他方法

【项目分析】

【代码实现】

【项目总结】

单元6 音频与视频

【教学导航】

【项目6-1】视频播放器

【项目描述】

【前导知识】

＜video＞标签的使用

HTML DOM Video对象

JavaScript运算符和if条件语句

【项目分析】

【代码实现】

【项目总结】

【项目6-2】HTML5 Web钢琴

【项目描述】

【前导知识】

＜audio＞标签的使用

HTML DOM Audio对象

JavaScript循环语句

【项目分析】

【代码实现】

【项目总结】

【项目6-3】音乐播放器

【项目描述】

【项目分析】

【代码实现】

【项目总结】

单元7 响应式Web设计

【教学导航】

【项目7-1】第一个响应式网站

【项目描述】

【前导知识】

关于视口

媒体查询

百分比布局

【项目分析】

【代码实现】

【项目总结】

【项目7-2】社交网站个人信息页面

【项目描述】

【前导知识】

响应式栅格系统

弹性盒布局

【项目分析】

【代码实现】

【项目总结】

单元8 响应式设计神器——Bootstrap

【教学导航】

【项目8】Bootstrap餐饮类网站首页

【项目描述】

【任务1-完成网页header部分】

【任务2-完成网页搜索模块】

【任务3-完成热卖商品模块】

【任务4-完成特色推荐模块】

【任务5-完成轮播广告模块】

【任务6-整合所有模块，完成footer部分】

附录1 HTML5新增标签和废除标签

附录2 CSS3新增属性

附录3 CSS3中需要加浏览器私有前缀的属性