第1章 移动互联中的Web应用 1
1.1移动互联网的发展 1
1.2移动Web开发概述 3
1.2.1移动开发的几种方式 3
1.2.2移动Web开发与PC端Web开发的区别 4
1.3移动端的Web浏览器 4
1.4基于HTML5的移动Web开发 5
小结 7
思考题 7
第2章 基于HTML5的移动Web应用(上) 8
2.1HTML5的网络存储 8
2.1.1Web Storage简介 9
2.1.2localStorage 10
2.1.3sessionStorage 12
2.1.4Storage事件监听 14
2.2移动Web离线应用 15
2.2.1离线应用简介 15
2.2.2Application Cache的基本应用 16
2.2.3application Cache对象 20
2.2.4离线缓存更新 21
2.3HTML5画布 22
2.3.1初识canvas 22
2.3.2利用canvas绘制矩形和清除矩形 25
2.3.3利用canvas绘制圆形 27
2.3.4利用canvas绘制图片 28
2.3.5利用canvas其他方法 30
小结 31
思考题 31
第3章 基于HTML5的移动Web应用(下) 32
3.1视频与音频 32
3.1.1〈video〉标签的使用 33
3.1.2HTML DOM Video对象 35
3.1.3〈audio〉标签的使用 38
3.1.4HTML DOM Audio对象 39
3.2Geolocation地理定位 42
3.2.1Geolocation简介 42
3.2.2获取当前位置 42
3.2.3调用百度地图 45
3.3拖曳 49
3.4文件操作 52
3.4.1选择文件 53
3.4.2操作文件 55
小结 59
思考题 59
第4章 移动端页面布局和常用事件 60
4.1流式布局 60
4.2视口 62
4.2.1理解视口 62
4.2.2移动端的3种视口 63
4.3移动端常用事件 65
4.3.1Touch事件简介 65
4.3.2Touch事件的应用 67
4.3.3过渡和动画结束事件 70
小结 75
思考题 75
第5章 综合项目——黑马掌上商城 76
5.1项目简介 76
5.1.1项目功能展示 77
5.1.2项目目录和文件结构 78
5.1.3项目开发流程 78
5.2商城首页 80
5.2.1【任务1】项目搭建 80
5.2.2【任务2】页面主体和头部搜索 83
5.2.3【任务3】轮播图 87
5.2.4【任务4】导航栏 92
5.2.5【任务5】商品 95
5.3商品分类页 102
5.3.1【任务6】顶部通栏 102
5.3.2【任务7】左侧栏 104
5.3.3【任务8】右侧栏 109
5.4购物车页面 114
5.4.1【任务9】购物车页面 114
5.4.2【任务10】弹出框动画 122
5.5Zeptojs 127
5.5.1Zepto模块 127
5.5.2Zepto的使用 128
小结 129
思考题 130
第6章 跨平台移动Web技术 131
6.1响应式Web设计 131
6.1.1响应式Web设计简介 132
6.1.2响应式Web设计相关技术 133
6.2媒体查询 133
6.3栅格系统 136
6.4弹性盒布局 139
小结 146
思考题 146
第7章 使用Bootstrap进行移动Web开发 147
7.1初识Bootstrap 147
7.1.1Bootstrap简介 147
7.1.2Bootstrap下载 148
7.1.3Bootstrap基本模板 150
7.2Bootstrap常用布局 151
7.2.1布局容器 151
7.2.2栅格系统 152
7.2.3响应式工具 154
7.3Bootstrap常用样式 157
7.3.1导航栏 157
7.3.2表单 161
7.3.3按钮 166
7.3.4标签页 168
7.3.5轮播插件 170
小结 174
思考题 174
第8章 综合项目——黑马财富 175
8.1项目简介 176
8.1.1项目功能展示 176
8.1.2项目目录和文件结构 178
8.1.3项目开发流程 179
8.2【任务1】index.html页面结构搭建 180
8.3【任务2】顶部通栏模块 182
8.4【任务3】导航栏模块 186
8.5【任务4】轮播图模块 191
8.6【任务5】信息和预约模块 197
8.7【任务6】产品模块 203
8.8【任务7】新闻和合作伙伴模块 213
小结 222
思考题 222