响应式Web开发项目教程

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

【教学导航】　2

响应式Web设计简介　2

【项目1-1】使用HTML5 CSS3

　绘制HTML5的logo　4

【项目描述】　4

【前导知识】　4

HTML5的新特性　4

HTML5的基本语法　5

CSS3的新特性　6

如何在HTML中引入样式表　6

CSS3与浏览器　7

【项目分析】　7

【代码实现】　7

【项目总结】　12

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

　页面　13

【项目描述】　13

【前导知识】　14

HTML5语义化结构标签　14

CSS选择器　15

盒子模型　17

CSS的浮动与定位　18

【项目分析】　21

【代码实现】　22

【项目总结】　28



单元2　文本类网页设计　29

【教学导航】　30

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

【项目描述】　30

【前导知识】　31

HTML5中常用的文本标签　31

CSS的字体样式属性　31

多列布局　33

【项目分析】　34

【代码实现】　35

【项目总结】　37

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

【项目描述】　38

【前导知识】　38

CSS的文本外观属性　38

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

CSS的优先级　41

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

【项目分析】　44

【代码实现】　45

【项目总结】　49

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

【项目描述】　49

【前导知识】　49

CSS链接属性　49

CSS导航栏　50

【项目分析】　50

【代码实现】　51

【项目总结】　55



单元3　图文展示网页设计　56

【教学导航】　57

【项目3-1】黑马书城　57

【项目描述】　57

【前导知识】　58

HTML5常用图像标签　58

CSS背景设置　59

CSS阴影和渐变　59

【项目分析】　63

【代码实现】　64

【项目总结】　68

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

【项目描述】　68

【前导知识】　68

CSS3的圆角边框　68

CSS3的过渡（CSS3　transition）　70

CSS3变形（CSS3　transform）　72

【项目分析】　76

【代码实现】　78

【项目总结】　83

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

【项目描述】　83

【前导知识】　83

CSS3动画（CSS3　animations）　83

CSS精灵技术（CSS　Sprites）　85

【项目分析】　87

【代码实现】　88

【项目总结】　91



单元4　HTML5表单的应用　93

【教学导航】　94

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

【项目描述】　94

【前导知识】　95

介绍表单　95

HTML5　标签　96

【项目分析】　99

【代码实现】　100

【项目总结】　102

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

【项目描述】　103

【前导知识】　104

其他表单标签　104

HTML5表单验证　108

【项目分析】　109

【代码实现】　110

【项目总结】　114



单元5　HTML5画布　115

【教学导航】　116

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

【项目描述】　116

【前导知识】　116

JavaScript的那些事　116

初识canvas　123

【项目分析】　125

【代码实现】　126

【项目总结】　127

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

　照片　128

【项目描述】　128

【前导知识】　129

canvas绘制矩形和清除矩形　129

canvas绘制圆形　130

canvas　绘制图片　131

canvas中的其他方法　132

【项目分析】　133

【代码实现】　134

【项目总结】　137



单元6　音频与视频　138

【教学导航】　139

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

【项目描述】　139

【前导知识】　139