第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