课程简介

本课程重点讲解从事移动web开发需要掌握的流式布局方式、viewport设置相关知识、主流的移动web开发适配方式、利用流式布局完成移动web页面开发以及开发阶段会面临的各种问题，在此基础上，学员可以通过一个移动站点进行实践学习。

适合人群

1.  适合有HTML和CSS基础的同学

2. 掌握一定的JS基础知识的同学

技术储备：

1. 具备HTML和CSS基础编程能力

2. 具备一定的JS基础知识

课程特色

1. 案例驱动，知识点由浅入深进行学习

2. 完整项目，布局和功能的多样性

3. 提供多种应用型解决方案

课程大纲

第一章 移动web开发基础知识

01-移动web-为什么学习移动web开发

02-移动web-基础知识-像素密度

03-移动web-基础知识-设备独立像素

04-移动web-基础知识-css像素

05-移动web-基础知识-2倍图

06-移动web-调试

07-移动web-PC端的视口

08-移动web-移动端的视口

09-移动web-移动端页面正常展示的解决方案分析

10-移动web-移动端viewport的设置(width)

11-移动web-移动端viewport的设置(initial-scale)

12-移动web-移动端viewport的设置(其它属性)

13-移动web-移动站点和浏览器的说明

第二章 京东首页布局

01-移动web-京东首页公共样式

02-移动web-京东首页整体结构

03-移动web-京东首页顶部结构块的制作方式

04-移动web-京东首页顶部结构块制作

05-移动web-京东首页轮播图结构块制作

06-移动web-京东首页导航块制作

第三章 京东产品区域制作

01-移动web-产品块制作(图片区域上)

02-移动web-产品块制作(图片区域下)

03-移动web-产品块制作(秒杀标题栏)

04-移动web-产品块制作(秒杀块内容)

第四章 京东首页功能效果实现

01-移动web-京东首页搜索块js效果

02-移动web-京东首页倒计时js效果

03-移动web-京东首页-轮播图(拖动修改页面结构和样式)

04-移动web-京东首页-轮播图(js添加首尾图片)

05-移动web-京东首页-轮播图(js设置样式)

06-移动web-京东首页-轮播图(js实现自动轮播)

07-移动web-京东首页轮播图自动轮播完善

第五章 移动端的touch事件

01-移动web-移动端的touch事件简介

02-移动web-移动端的touch事件(手指对象数组)

03-移动web-移动端的touch事件(手指对象的坐标获取)

04-移动web-使用touch事件实现元素的拖拽

05-移动web-touch事件源参数中的target

06-移动web-轮播图-实现滑动操作

07-移动web-轮播图-实现滑动操作(细节)

08-移动web-轮播图-松开手指之后的处理

09-移动web-轮播图-添加过渡结束的监听

10-移动web-轮播图中一个bug的解决

11-移动web-轮播图点标记的设置

第六章 使用zepto.js实现轮播图

01-移动web-zepto的基本特点和下载

02-移动web-使用zepto实现轮播图(上)

03-移动web-使用zepto实现轮播图(中)

04-移动web-使用zepto实现轮播图(下)

05-移动web-zepto的定制

第七章 分类页面布局和效果实现

01-移动web-分类页面结构的简单说明

02-移动web-分类页面的全屏结构创建

03-移动web-分类页面顶部搜索块的制作

04-移动web-分类页面左侧导航块的制作

05-移动web-分类页面右侧商品块的制作

06-移动web-初步实现左侧栏的滑动

07-移动web-设置滑动区间

08-移动web-松开手指之后的处理

09-移动web-cilck等操作在移动端的延迟

第八章 移动端tap事件

01-移动web-移动端的tap事件

02-移动web-移动端tap事件的封装

03-移动web-分类页面tap事件的添加(上)

04-移动web-分类页面tap事件的添加(下)

第九章 移动web端常用插件的介绍和使用

01-移动web-使用zepto来实现左侧单击操作

02-移动web-移动端touch事件所产生的点透问题

03-移动web-fastclick的使用

04-移动web-使用fastclick实现分类页面左侧栏的点击操作

05-移动web-iscroll的使用说明(上)

06-移动web-iscroll的使用说明(下)

07-移动web-swipe插件的使用

08-移动web-swiper插件的使用介绍

09-移动web-使用iscroll插件完成分类页面右侧内容块的滑动操作

实战项目

项目名称

移动端电商项目

项目描述 

本项目制作首页轮播图切换的过程中实现拖动修改网页布局和样式的功能，使用zepto优化轮播图实现左右滑动并添加移动设备的tap事件；详细讲解tap的点透问题，并使用fastclick解决clcik事件的延迟问题；通过内容块的滑动案例深入讲解isscroll和swiper插件的应用。

课程收获

1. 实现页面适配移动设备屏幕

2. 能够完成京东移动端首页效果图

3. 实现手动滑动页面效果

4. zepto实现轮播图

5. fastclick实现分类页面左侧栏的点击操作

6. swiper插件的应用滑动效果

7. iscroll插件完成页面滑动操作