能力缺口：从Web端到移动端的开发鸿沟
许多前端开发者拥有丰富的PC端开发经验，但在面对移动端项目时，往往发现自己面临知识断层。移动端特有的屏幕尺寸不均、触摸交互差异、性能瓶颈等问题，是纯Web端经验难以覆盖的。这门课专门针对这一鸿沟，通过体系化的HTML5、CSS3和JavaScript实战，帮助学员建立移动端开发的底层思维。课程从移动端布局的常见误区切入，以网易、天猫等真实APP案例为参照，系统讲解弹性布局、视口适配、重置默认样式等关键技能。它适合那些想转岗移动端但缺乏实践基础的开发者，或需要补齐移动端知识短板的现有从业者。重点在于掌握移动端特有的视觉解决方案和交互优化技巧，而非简单适配。
配套练习：商业级案例的解构与重构
课程练习以商业级APP为载体，强调从理论到实践的能力转化。资料包中提供了网易云音乐、网易APP等产品的布局源码，你需要先分析它们如何应对不同机型的分辨率适配问题，再通过课程中的小节讲解，亲手实现类似效果。例如，通过对比网易新闻的瀑布流布局与天猫固定导航的叠加关系，理解z-index层叠上下文的应用场景。关键练习包括：用Flexbox重构网易APP的横向菜单栏，对比传统float布局的兼容性差异；模拟天猫购物车的下拉刷新动画，掌握transform性能优化技巧。学完后，你应该能独立完成一个包含手势交互、动态加载的多页APP界面，并能解释touch事件与mouse事件的区别，以及如何利用Service Worker提升离线体验。
核心内容：移动端开发的核心技能链
课程以HTML5基础为起点，通过网易APP的顶部导航栏案例，教会你如何利用viewport单位实现跨设备适配。接着进入重点章节，用网易新闻APP的瀑布流布局演示Flexbox的横向排列策略，同时对比传统float布局的局限性。CSS3部分会结合天猫购物车的下拉刷新动画，教你如何用transform实现高性能动画。资料包里保留了淘宝APP的多级菜单嵌套问题，需要你分析z-index层叠上下文的处理技巧。课程穿插了移动端特有的touch事件监听优化，比如如何解决双击缩放时的误触问题。学完后，你应能独立完成一个包含手势交互、缓存优化的移动端项目雏形，并理解WebSocket在实时消息模块的应用逻辑。特别是通过网易云音乐的布局实践，你会掌握rem单位的计算方法，以及如何避免不同浏览器对flexbox的渲染差异。
课程目录
1-1 [HTML5概要] HTML5简介 (03:52) 1-2 [HTML5概要] HTML5新功能介绍 (06:57) 1-3 [HTML5概要] CSS3简介 (02:35) 1-4 [HTML5概要] HTML新增API (01:48) 2-1 [移动端布局] 移动端布局常见问题 (05:25) 2-2 [移动端布局] 网易APP布局实现 (04:17) 2-3 [移动端布局] 天猫APP布局实现 (04:47) 2-4 [移动端布局] 淘宝APP布局实现 (05:00) 2-5 [移动端布局] 网易云音乐布局 (08:26) 3-1 [CSS3新样式和动画] CSS3圆角和三角形 (05:21) 3-2 [CSS3新样式和动画] CSS3阴影-立体按钮效果实现 (06:34) 3-3 [CSS3新样式和动画] CSS3渐变 - 信纸效果实现 (08:36) 3-4 [CSS3新样式和动画] CSS3渐变 - 网页加载进度条实现 (02:15) 3-5 [CSS3新样式和动画] CSS3文字阶段功能实现 (03:11) 3-6 [CSS3新样式和动画] CSS3变换 (04:42) 3-7 [CSS3新样式和动画] CSS3过渡 (01:50) 3-8 [CSS3新样式和动画] scale的特殊用法 (01:40) 3-9 [CSS3新样式和动画] 变换-transform其它写法 (01:48) 3-10 [CSS3新样式和动画] CSS3登录效果实现 (01:38) 3-11 [CSS3新样式和动画] CSS3图片切换效果 (02:56) 3-12 [CSS3新样式和动画] CSS3时钟实现 (07:56) 3-13 [CSS3新样式和动画] CSS3真正3d变换 (08:41) 3-14 [CSS3新样式和动画] CSS3立方体实现 (05:49) 3-15 [CSS3新样式和动画] CSS3答案卡翻面效果 (03:41) 3-16 [CSS3新样式和动画] CSS3 3d翻页效果 (09:56) 3-17 [CSS3新样式和动画] CSS3 动画简介 (05:18) 3-18 [CSS3新样式和动画] CSS3 动画效果-风车 (01:33) 3-19 [CSS3新样式和动画] CSS3 过渡与动画对比 (01:33) 4-1 [H5新增API使用] form新增控件 (05:23) 4-2 [H5新增API使用] 序列化和反序列化 (02:05) 4-3 [H5新增API使用] Web Storage介绍 (04:52) 4-4 [H5新增API使用] 窗口同步拖拽功能实现 (02:37) 4-5 [H5新增API使用] 购物车功能功能实现 (01:27) 4-6 [H5新增API使用] QQ邮箱附件上传效果 (07:50) 4-7 [H5新增API使用] GeoLocation Api介绍 (03:31) 4-8 [H5新增API使用] 百度地图Api使用 (03:10) 4-9 [H5新增API使用] deviceorientation API (02:03) 4-10 [H5新增API使用] 微信摇一摇功能实现 (01:59) 4-11 [H5新增API使用] webworker 介绍 (06:09) 4-12 [H5新增API使用] webworker实现斐波那契数列 (03:17) 5-1 [HTML5 多媒体] Audio介绍 (02:37) 5-2 [HTML5 多媒体] Html5 audio 实现钢琴.mp4 (04:18) 5-3 [HTML5 多媒体] 简易版音乐播放器 (04:27) 5-4 [HTML5 多媒体] Video标签介绍 (02:17) 5-5 [HTML5 多媒体] 简易版视频播放器 (04:04) 5-6 [HTML5 多媒体] 采集用户的视频 (01:39) 5-7 [HTML5 多媒体] 微信语音功能实现 (03:19) 6-1 [JavaScript数据可视化和图表库] 什么是canvas (01:22) 6-2 [JavaScript数据可视化和图表库] canvas的基础操作-直线、矩形 (07:16) 6-3 [JavaScript数据可视化和图表库] canvas绘制柱状图 (10:12) 6-4 [JavaScript数据可视化和图表库] 使用canvas绘制动态屏保 (07:53) 6-5 [JavaScript数据可视化和图表库] 使用canvas绘制WIFI信号 (03:37) 6-6 [JavaScript数据可视化和图表库] 使用canvas绘制数据扇形图 (06:03) 6-7 [JavaScript数据可视化和图表库] 使用canvas绘制精美时钟 (04:05) 6-8 [JavaScript数据可视化和图表库] 使用canvas绘制动画 (07:36) 6-9 [JavaScript数据可视化和图表库] 使用canvas实现Photoshop各种滤镜效果 (07:16) 6-10 [JavaScript数据可视化和图表库] 综合案例-使用canvas实现windows绘图板软件 (03:40) 6-11 [JavaScript数据可视化和图表库] 综合案例：面向对象的方式实现图表 (06:15) 6-12 [JavaScript数据可视化和图表库] 综合案例-echarts实现K线图 (02:43) 6-13 [JavaScript数据可视化和图表库] 综合案例-D3实现学生成绩可视化 (05:02) 6-14 [JavaScript数据可视化和图表库] 综合对比：常用JavaScript数据可视化和图表库对比 (02:43)
