第 1章　Flex布局与响应式布局　1
任务1　认识Flex弹性盒布局　2
1.1.1　为什么要使用弹性布局　2
1.1.2　实现弹性布局的方法　4
1.1.3　上机训练　15
任务2　实现响应式布局　16
1.2.1　响应式网页设计　16
1.2.2　媒体查询　17
1.2.3　上机训练　23
1.2.4　响应式布局的应用　24
1.2.5　响应式布局的优缺点　26
本章作业　26
第　2章 初识Bootstrap　27
任务1　认识Bootstrap　28
2.1.1　Bootstrap概述　28
2.1.2　Bootstrap使用方法　29
2.1.3　Bootstrap整体结构　32
任务2　使用Bootstrap栅格系统进行页面布局　33
2.2.1　栅格系统简介　33
2.2.2　实现原理　33
2.2.3　栅格系统的使用　34
2.2.4　响应式栅格　38
2.2.5　上机训练　42
任务3　使用Bootstrap CSS全局样式　42
2.3.1　Bootstrap排版　43
2.3.2　Bootstrap表单　46
2.3.3　Bootstrap按钮　49
2.3.4　Bootstrap图片　50
2.3.5　上机训练　50
本章作业　51
第3章　Bootstrap CSS组件　55
任务1　使用图标组件　56
3.1.1　使用方法　57
3.1.2　应用场景　58
3.1.3　实现方式　59
任务2　使用下拉菜单组件　59
3.2.1　基本下拉菜单　59
3.2.2　分离式下拉菜单　61
3.2.3　上机训练　62
任务3　使用输入框组件　63
3.3.1　基本的输入框组件　63
3.3.2　输入框组件的大小　64
3.3.3　按钮插件　64
任务4　使用导航和导航栏组件　65
3.4.1　导航　65
3.4.2　导航栏　68
3.4.3　上机训练　74
任务5　使用缩略图　75
任务6　使用媒体对象　77
任务7　使用列表组　78
任务8　使用分页导航　80
3.8.1　分页（Pagination）　80
3.8.2　翻页（Pager）　81
3.8.3　上机训练　81
本章作业　82
第4章　Bootstrap JavaScript插件　85
任务1　认识JavaScript插件　86
4.1.1　JavaScript插件的引入方式　86
4.1.2　data属性概述　87
任务2　实现动画过渡效果　87
任务3　使用Modal插件实现模态框效果　89
4.3.1　基础布局与样式　89
4.3.2　尺寸设置　91
4.3.3　常用属性　92
4.3.4　动态设置模态框属性　92
4.3.5　上机训练　93
任务4　使用Tab插件实现选项卡效果　94
4.4.1　基础布局与样式　94
4.4.2　动态操作选项卡插件的属性及方法　96
4.4.3　上机训练　96
任务5　使用Carousel插件实现轮播图　97
4.5.1　基础布局与样式　97
4.5.2　自定义属性　100
4.5.3　动态调用　100
4.5.4　上机训练　101
任务6　使用ScrollSpy插件实现滚动监听　102
4.6.1　基础布局与使用　102
4.6.2　动态调用　104
4.6.3　上机训练　105
任务7　Bootstrap总结　106
本章作业　107
第5章　移动端页面布局　111
任务1　移动Web概述　112
5.1.1　什么是移动Web　112
5.1.2　移动Web的现状　113
5.1.3　PC与移动Web开发的区别　113
任务2　移动端开发、测试浏览器　114
5.2.1　移动端浏览器的类型　114
5.2.2　测试浏览器　115
任务3　移动端视口及视口标签　119
5.3.1　移动端的三种视口　119
5.3.2　视口标签　123
任务4　设备像素比　125
任务5　实现移动端布局　126
5.5.1　使用em布局网页内容　126
5.5.2　使用rem布局网页内容　129
5.5.3　上机训练　133
本章作业　134
第6章　移动端事件与Zepto框架　137
任务1　使用移动端事件　138
6.1.1　click事件　138
6.1.2　touch（触摸）事件　139
6.1.3　上机训练　142
任务2　使用Zepto框架　143
6.2.1　初识Zepto　143
6.2.2　Zepto和jQuery的区别　144
6.2.3　Zepto框架常用选择器　145
6.2.4　Zepto框架常用方法和属性　148
6.2.5　上机训练　153
本章作业　154
第7章　移动端开发技巧　157
任务1　开发技巧　158
任务2　常见问题　159
任务3　移动端优化　160
7.3.1　加载优化　161
7.3.2　图片优化　162
7.3.3　脚本优化　163
本章作业　164
第8章　项目实战——制作“爱旅行”网站　165
任务1　开发流程制订及角色分工　167
任务2　项目分析　168
8.2.1　需求概述　169
8.2.2　问题分析　171
任务3　项目实现　173
8.3.1　公用部分　174
8.3.2　网站首页——轮播图　176
8.3.3　网站首页——图文混排　177
8.3.4　旅游首页　179
8.3.5　列表页　181
8.3.6　详情页　182
8.3.7　选择日期和人数页　184
8.3.8　选择资源页　185
8.3.9　订单填写页　185
8.3.10　目的地页　186
8.3.11　登录页　186
8.3.12　注册页　187
8.3.13　浏览历史页　187
8.3.14　我的页面　188
8.3.15　订单页　188
本章作业　189