课程 / JavaScript

前端基础进阶-移动Web

【23期】PHP培训班，最后一天报名！

本课程采用2+5模式，前两天承接HTML+CSS，使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每章节都配备综合案例，学完即练习企业级项目，让学生不仅掌握知识点，还能学到知识点在实际开发中的应用场景，让学生学以致用。

难度：中级

共187章节

80374次播放

第1章课程介绍: 阶段课程介绍
19:22; 今日课程介绍
03:32
第2章字体图标: 字体图标-基本使用
12:14; 字体图标-iconfont类
05:05; 案例-购物车
09:54; 字体图标-svg-上传
10:15
第3章平面转换: 平面转换-介绍
08:07; 平面转换-位移
03:39; 平面转换-位移-技巧
09:08; 平面转换-定位盒子居中
12:23; 案例-双开门-布局
06:00; 案例-双开门-hover效果
04:55; 平面转换旋转
07:45; 平面转换-转换圆点
06:15; 平面转换-多重转换
06:15; 平面转换-缩放
18:24; 案例-缩放
03:39; 案例-缩放-注意点-层叠性
11:26; 渐变
09:05; 案例-渐变
10:00; 综合案例-华为-结构分析
07:05; 综合案例-华为-mask
12:06; 综合案例-华为-hover效果
第4章空间转换: 今日课程介绍
07:13; 空间转换-简介
04:13; 空间转换-位移
07:35; 空间转换-透视属性
09:22; 空间转换-透视属性-原理
09:33; 空间转换-rotateZ
04:16; 空间转换-rotateX
04:34; 空间转换-rotateY
03:30; 空间转换-左手法则
05:41; 空间转换-rotate3d-了解
02:33; 空间转换-立体呈现
12:52
第5章 3d导航: 3d导航-结构分析
06:24; 3d导航-搭建立方体
08:04; 3d导航-hover
05:21
第6章课程回顾: 上午回顾
03:27; 空间转换-缩放
05:42
第7章动画: 动画-简介
10:46; 动画-from..to
06:16; 动画-百分比
04:48; 动画-animation复合属性01
11:18; 动画-animation复合属性02
08:15; 动画-animation拆分写法
07:07; 动画-逐帧动画-简介
05:21; 动画-逐帧动画-实现
12:02; 动画-多组动画
10:31
第8章综合案例: 走马灯
18:52; 全民出游-背景大图
15:01; 全民出游-云彩-布局
07:37; 全民出游-云彩-动画
05:39
第9章课程介绍2: 考试题
11:57; 课程介绍
01:49; 课程知识介绍
01:01
第10章移动端的特点: PC和移动网页不同点
05:13; 谷歌模拟器
07:07; 分辨率
10:32; 代码参考分辨率-逻辑
10:02; 视口
12:00; 二倍图
14:50; 百分比布局
12:27
第11章 Flex: Flex-体验
09:43; Flex简介
08:40; Flex-组成
08:42; Flex-主轴对齐方式
10:39; Flex-侧轴对齐方式
09:48; Flex-单独控制某个盒子侧轴对齐方式
03:17; Flex-弹性盒子尺寸特点
04:38; Flex-弹性伸缩比
12:45
第12章小兔鲜-订单: 小兔鲜儿-确认订单-准备工作
10:10; 确认订单-整体布局
16:16; 确认订单-底部支付-布局
07:39; 确认订单-底部支付-左侧
07:16; 确认订单-底部支付-右侧
04:25; 确认订单-用户信息-整体布局
13:01; 确认订单-用户信息-内容布局
05:38; 确认订单-用户信息-文字内容
08:39
第13章小兔鲜儿-商品与其他信息: 课程介绍
02:48; 商品-布局
12:24; 商品-数量
05:36; 商品-描述
16:35; 其他信息-布局
11:08; 其他信息-内容
08:47
第14章 Flex布局: Flex-修改主轴方向
07:51; Flex-主轴方向和对齐方式
05:32; Flex-弹性盒子换行
08:52; Flex-调整行对齐方式
05:51
第15章小兔鲜儿-PC: 项目介绍
10:10; 背景
07:25; 内容布局
08:25; 账户概览-布局
09:02; 账户概览-内容
14:46; 账户概览-图片尺寸
03:54; 公共面板-布局
10:22; 公共面板-文字样式
04:30; 订单-li布局
07:03; 订单-内容布局
07:31; 订单-goods
09:18; 订单-goods-省略号
07:29; 订单-common
08:55
第16章移动适配: 移动适配
10:24; 今日课程介绍
02:11; 体验rem移动适配
05:00; rem-基本使用
07:04; rem-媒体查询
12:53; rem-移动适配; rem-布局流程
08:40; rem-flexible移动适配
09:46; Less-体验; Less-简介; Less-EasyLess插件; Less-注释; Less-计算; Less-嵌套; Less-变量; Less-导入; Less-导出-插件配置; Less-导出-单独路径; Less-禁止导出
第17章游乐园项目: 项目准备
07:10; Less-导入; 整体布局; 根字号变量; banner区域; 活动标题; 活动-布局
06:54; 活动-字体图标; 活动-状态-蓝色; 活动状态-灰色; 活动-文字-top; 活动-文字-bottom; 活动-内容复制; 活动-底部工具栏
10:46
第18章 vw和vh: vw-体验; vh-体验; vw-移动适配
06:27; vh-移动适配
04:30; vh-全面屏影响
05:10
第19章 B站: 获取素材
08:51; 项目准备
05:51; 头部-布局; vw变量
01:39; 头部-logo图标
06:53; 头部-right内容; 头部-更多; 头部-字体图标字号; 头部-tab; 视频-布局; 视频-思路; 视频-介绍文字; 视频-数量统计; 视频-弹性盒子换行; 头部-层级和背景色
03:10
第20章媒体查询: 课程介绍; 媒体查询-max-min-width; 媒体查询-书写顺序; 了解-媒体查询-完整写法; 媒体查询-link写法; 媒体查询-隐藏
第21章 bootstrap: bootstrap体验
07:10; bootstrap简介
03:18; bootstrap下载
09:56; bootstrap-使用
08:43; bootstrap-栅格系统-原理; bootstrap-栅格系统-代码; bootstrap-栅格系统-其他类名; bootstrap-介绍; bootstrap-表格; bootstrap-按钮; bootstrap-组件; bootstrap-字体图标; bootstrap-插件-下拉菜单; bootstrap-插件-轮播图
第22章 AlloyTeam: 项目准备; banner图-高度; 头部-组件
06:41; 头部-样式; 定制-项目导航; 开源项目-标题文字
06:28; 开源项目-栅格布局
04:14; 开源项目-内容
06:32; 全局样式
08:10

讲师介绍

王林: 学生

能学到什么:: 本课程采用2+5模式，前两天承接HTML+CSS，使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每章节都配备综合案例，学完即练习企业级项目，让学生不仅掌握知识点，还能学到知识点在实际开发中的应用场景，让学生学以致用。

前端基础进阶-移动W...前端基础进阶-移动W...
下载

取消回复发送

PHP中文网