博学谷 > 免费课 > 移动web视频教程

移动web视频教程

移动web视频教程

本视频内容重点讲解从事移动web开发前需要掌握额流式布局方式和viewport设置相关知识,在掌握基本知识之后学习主流的移动web开发适配方式,怎样利用流式布局完成移动web页面开发,在移动web页面开发的时候我们讲要面对的那些问题,都会通过一个移动站点来实践学习。

主讲:前端高级讲师 | 课程时长:12课时| 学习人数:777人 | 难度: 进阶

免费

立即报名

第 一 章:移动web视频教程

1-1 移动web开发基础知识

1-1-1 01-移动web-为什么学习移动web开发
1-1-2 02-移动web-基础知识-像素密度
1-1-3 03-移动web-基础知识-设备独立像素
1-1-4 04-移动web-基础知识-css像素
1-1-5 05-移动web-基础知识-2倍图
1-1-6 06-移动web-调试
1-1-7 07-移动web-PC端的视口
1-1-8 08-移动web-移动端的视口
1-1-9 09-移动web-移动端页面正常展示的解决方案分析
1-1-10 10-移动web-移动端viewport的设置(width)
1-1-11 11-移动web-移动端viewport的设置(initial-scale)
1-1-12 12-移动web-移动端viewport的设置(其它属性)
1-1-13 13-移动web-移动站点和浏览器的说明

1-2 京东首页布局

1-2-1 01-移动web-京东首页公共样式
1-2-2 02-移动web-京东首页整体结构
1-2-3 03-移动web-京东首页顶部结构块的制作方式
1-2-4 04-移动web-京东首页顶部结构块制作
1-2-5 05-移动web-京东首页轮播图结构块制作
1-2-6 06-移动web-京东首页导航块制作

1-3 京东产品区域制作

1-3-1 01-移动web-产品块制作(图片区域上)
1-3-2 02-移动web-产品块制作(图片区域下)
1-3-3 03-移动web-产品块制作(秒杀标题栏)
1-3-4 04-移动web-产品块制作(秒杀块内容)

1-4 京东首页功能效果实现

1-4-1 01-移动web-京东首页搜索块js效果
1-4-2 02-移动web-京东首页倒计时js效果
1-4-3 03-移动web-京东首页-轮播图(拖动修改页面结构和样式)
1-4-4 04-移动web-京东首页-轮播图(js添加首尾图片)
1-4-5 05-移动web-京东首页-轮播图(js设置样式)
1-4-6 06-移动web-京东首页-轮播图(js实现自动轮播)
1-4-7 07-移动web-京东首页轮播图自动轮播完善

1-5 移动端的touch事件

1-5-1 01-移动web-移动端的touch事件简介
1-5-2 02-移动web-移动端的touch事件(手指对象数组)
1-5-3 03-移动web-移动端的touch事件(手指对象的坐标获取)
1-5-4 04-移动web-使用touch事件实现元素的拖拽
1-5-5 05-移动web-touch事件源参数中的target
1-5-6 06-移动web-轮播图-实现滑动操作
1-5-7 07-移动web-轮播图-实现滑动操作(细节)
1-5-8 08-移动web-轮播图-松开手指之后的处理
1-5-9 09-移动web-轮播图-添加过渡结束的监听
1-5-10 10-移动web-轮播图中一个bug的解决
1-5-11 11-移动web-轮播图点标记的设置

1-6 使用zepto.js实现轮播图

1-6-1 01-移动web-zepto的基本特点和下载
1-6-2 02-移动web-使用zepto实现轮播图(上)
1-6-3 03-移动web-使用zepto实现轮播图(中)
1-6-4 04-移动web-使用zepto实现轮播图(下)
1-6-5 05-移动web-zepto的定制

1-7 分类页面布局和效果实现

1-7-1 01-移动web-分类页面结构的简单说明
1-7-2 02-移动web-分类页面的全屏结构创建
1-7-3 03-移动web-分类页面顶部搜索块的制作
1-7-4 04-移动web-分类页面左侧导航块的制作
1-7-5 05-移动web-分类页面右侧商品块的制作
1-7-6 06-移动web-初步实现左侧栏的滑动
1-7-7 07-移动web-设置滑动区间
1-7-8 08-移动web-松开手指之后的处理
1-7-9 09-移动web-cilck等操作在移动端的延迟

1-8 移动端tap事件

1-8-1 01-移动web-移动端的tap事件
1-8-2 02-移动web-移动端tap事件的封装
1-8-3 03-移动web-分类页面tap事件的添加(上)
1-8-4 04-移动web-分类页面tap事件的添加(下)

1-9 移动web端常用插件的介绍和使用

1-9-1 01-移动web-使用zepto来实现左侧单击操作
1-9-2 02-移动web-移动端touch事件所产生的点透问题
1-9-3 03-移动web-fastclick的使用
1-9-4 04-移动web-使用fastclick实现分类页面左侧栏的点击操作
1-9-5 05-移动web-iscroll的使用说明(上)
1-9-6 06-移动web-iscroll的使用说明(下)
1-9-7 07-移动web-swipe插件的使用
1-9-8 08-移动web-swiper插件的使用介绍
1-9-9 09-移动web-使用iscroll插件完成分类页面右侧内容块的滑动操作