- 介绍
- 目录
本课程采用2+5模式,前两天承接HTML+CSS,使用字体图标、平面转换、动画等,丰富网页效果和呈现方式;后5天完成移动端和多端适配效果。课程采用闭环方式设计,每章节都配备综合案例,学完即练习企业级项目,让学生不仅掌握知识点,还能学到知识点在实际开发中的应用场景, 让学生学以致用。
第2章
字体图标
-
1
- 字体图标-基本使用
- 学习时长:12分14秒
-
2
- 字体图标-iconfont类
- 学习时长:05分05秒
-
3
- 案例-购物车
- 学习时长:09分54秒
-
4
- 字体图标-svg-上传
- 学习时长:10分15秒
第3章
平面转换
-
1
- 平面转换-介绍
- 学习时长:08分07秒
-
2
- 平面转换-位移
- 学习时长:03分39秒
-
3
- 平面转换-位移-技巧
- 学习时长:09分08秒
-
4
- 平面转换-定位盒子居中
- 学习时长:12分23秒
-
5
- 案例-双开门-布局
- 学习时长:06分00秒
-
6
- 案例-双开门-hover效果
- 学习时长:04分55秒
-
7
- 平面转换旋转
- 学习时长:07分45秒
-
8
- 平面转换-转换圆点
- 学习时长:06分15秒
-
9
- 平面转换-多重转换
- 学习时长:06分15秒
-
10
- 平面转换-缩放
- 学习时长:18分24秒
-
11
- 案例-缩放
- 学习时长:03分39秒
-
12
- 案例-缩放-注意点-层叠性
- 学习时长:11分26秒
-
13
- 渐变
- 学习时长:09分05秒
-
14
- 案例-渐变
- 学习时长:10分00秒
-
15
- 综合案例-华为-结构分析
- 学习时长:07分05秒
-
16
- 综合案例-华为-mask
- 学习时长:12分06秒
-
17
- 综合案例-华为-hover效果
- 学习时长:计算中
第4章
空间转换
-
1
- 今日课程介绍
- 学习时长:07分13秒
-
2
- 空间转换-简介
- 学习时长:04分13秒
-
3
- 空间转换-位移
- 学习时长:07分35秒
-
4
- 空间转换-透视属性
- 学习时长:09分22秒
-
5
- 空间转换-透视属性-原理
- 学习时长:09分33秒
-
6
- 空间转换-rotateZ
- 学习时长:04分16秒
-
7
- 空间转换-rotateX
- 学习时长:04分34秒
-
8
- 空间转换-rotateY
- 学习时长:03分30秒
-
9
- 空间转换-左手法则
- 学习时长:05分41秒
-
10
- 空间转换-rotate3d-了解
- 学习时长:02分33秒
-
11
- 空间转换-立体呈现
- 学习时长:12分52秒
第5章
3d导航
-
1
- 3d导航-结构分析
- 学习时长:06分24秒
-
2
- 3d导航-搭建立方体
- 学习时长:08分04秒
-
3
- 3d导航-hover
- 学习时长:05分21秒
第7章
动画
-
1
- 动画-简介
- 学习时长:10分46秒
-
2
- 动画-from..to
- 学习时长:06分16秒
-
3
- 动画-百分比
- 学习时长:04分48秒
-
4
- 动画-animation复合属性01
- 学习时长:11分18秒
-
5
- 动画-animation复合属性02
- 学习时长:08分15秒
-
6
- 动画-animation拆分写法
- 学习时长:07分07秒
-
7
- 动画-逐帧动画-简介
- 学习时长:05分21秒
-
8
- 动画-逐帧动画-实现
- 学习时长:12分02秒
-
9
- 动画-多组动画
- 学习时长:10分31秒
第8章
综合案例
-
1
- 走马灯
- 学习时长:18分52秒
-
2
- 全民出游-背景大图
- 学习时长:15分01秒
-
3
- 全民出游-云彩-布局
- 学习时长:07分37秒
-
4
- 全民出游-云彩-动画
- 学习时长:05分39秒
第10章
移动端的特点
-
1
- PC和移动网页不同点
- 学习时长:05分13秒
-
2
- 谷歌模拟器
- 学习时长:07分07秒
-
3
- 分辨率
- 学习时长:10分32秒
-
4
- 代码参考分辨率-逻辑
- 学习时长:10分02秒
-
5
- 视口
- 学习时长:12分00秒
-
6
- 二倍图
- 学习时长:14分50秒
-
7
- 百分比布局
- 学习时长:12分27秒
第11章
Flex
-
1
- Flex-体验
- 学习时长:09分43秒
-
2
- Flex简介
- 学习时长:08分40秒
-
3
- Flex-组成
- 学习时长:08分42秒
-
4
- Flex-主轴对齐方式
- 学习时长:10分39秒
-
5
- Flex-侧轴对齐方式
- 学习时长:09分48秒
-
6
- Flex-单独控制某个盒子侧轴对齐方式
- 学习时长:03分17秒
-
7
- Flex-弹性盒子尺寸特点
- 学习时长:04分38秒
-
8
- Flex-弹性伸缩比
- 学习时长:12分45秒
第12章
小兔鲜-订单
-
1
- 小兔鲜儿-确认订单-准备工作
- 学习时长:10分10秒
-
2
- 确认订单-整体布局
- 学习时长:16分16秒
-
3
- 确认订单-底部支付-布局
- 学习时长:07分39秒
-
4
- 确认订单-底部支付-左侧
- 学习时长:07分16秒
-
5
- 确认订单-底部支付-右侧
- 学习时长:04分25秒
-
6
- 确认订单-用户信息-整体布局
- 学习时长:13分01秒
-
7
- 确认订单-用户信息-内容布局
- 学习时长:05分38秒
-
8
- 确认订单-用户信息-文字内容
- 学习时长:08分39秒
第13章
小兔鲜儿-商品与其他信息
第14章
Flex布局
-
1
- Flex-修改主轴方向
- 学习时长:07分51秒
-
2
- Flex-主轴方向和对齐方式
- 学习时长:05分32秒
-
3
- Flex-弹性盒子换行
- 学习时长:08分52秒
-
4
- Flex-调整行对齐方式
- 学习时长:05分51秒
第15章
小兔鲜儿-PC
第16章
移动适配
-
1
- 移动适配
- 学习时长:10分24秒
-
2
- 今日课程介绍
- 学习时长:02分11秒
-
3
- 体验rem移动适配
- 学习时长:05分00秒
-
4
- rem-基本使用
- 学习时长:07分04秒
-
5
- rem-媒体查询
- 学习时长:12分53秒
-
6
- rem-移动适配
- 学习时长:计算中
-
7
- rem-布局流程
- 学习时长:08分40秒
-
8
- rem-flexible移动适配
- 学习时长:09分46秒
-
9
- Less-体验
- 学习时长:计算中
-
10
- Less-简介
- 学习时长:计算中
-
11
- Less-EasyLess插件
- 学习时长:计算中
-
12
- Less-注释
- 学习时长:计算中
-
13
- Less-计算
- 学习时长:计算中
-
14
- Less-嵌套
- 学习时长:计算中
-
15
- Less-变量
- 学习时长:计算中
-
16
- Less-导入
- 学习时长:计算中
-
17
- Less-导出-插件配置
- 学习时长:计算中
-
18
- Less-导出-单独路径
- 学习时长:计算中
-
19
- Less-禁止导出
- 学习时长:计算中
第17章
游乐园项目
第18章
vw和vh
第19章
B站
第20章
媒体查询
-
1
- 课程介绍
- 学习时长:计算中
-
2
- 媒体查询-max-min-width
- 学习时长:计算中
-
3
- 媒体查询-书写顺序
- 学习时长:计算中
-
4
- 了解-媒体查询-完整写法
- 学习时长:计算中
-
5
- 媒体查询-link写法
- 学习时长:计算中
-
6
- 媒体查询-隐藏
- 学习时长:计算中
第21章
bootstrap
-
1
- bootstrap体验
- 学习时长:07分10秒
-
2
- bootstrap简介
- 学习时长:03分18秒
-
3
- bootstrap下载
- 学习时长:09分56秒
-
4
- bootstrap-使用
- 学习时长:08分43秒
-
5
- bootstrap-栅格系统-原理
- 学习时长:计算中
-
6
- bootstrap-栅格系统-代码
- 学习时长:计算中
-
7
- bootstrap-栅格系统-其他类名
- 学习时长:计算中
-
8
- bootstrap-介绍
- 学习时长:计算中
-
9
- bootstrap-表格
- 学习时长:计算中
-
10
- bootstrap-按钮
- 学习时长:计算中
-
11
- bootstrap-组件
- 学习时长:计算中
-
12
- bootstrap-字体图标
- 学习时长:计算中
-
13
- bootstrap-插件-下拉菜单
- 学习时长:计算中
-
14
- bootstrap-插件-轮播图
- 学习时长:计算中
课程推荐
更多>
-
视频
- HTML5+CSS练手项目【手敲阴阳师官网】
- 网页作品布局方面:网页布局整体为LOGO、导航、轮播图、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。首页制作了留言表单,同时简单使用JavaScript制作了表单判断。
- 立即学习 2022/12/22 12:39
-
视频
- 前端HTML5+CSS3(女神版)
- 最新的web前端html5+css3+前端项目重磅上线啦!采用实战式教学,一线大厂的综合案例,用最短的路径讲解每个技术点,每章节都自成闭环。课程中和课程尾配备两个实战项目,项目一类型是企业站,快速的将基础知识点进行反复练习;项目二类型是电商站,基于项目一升级难度,掌握更复杂的网页效果的开发流程和布局标准。严格按照专业的开发流程:专业的测量工具,做到100%还原设计稿;编码规范对标一线大厂开发标准,
- 立即学习 2022/12/22 44:28
-
视频
- 前端基础HTML5+CSS3从入门到精通(完整版)
- 本视频基于2021年最新web标准录制,包含所有HTML5+CSS3的新特性,传统布局和弹性盒布局、响应式布局、网格布局深入讲解,打造一站式知识长龙服务,0基础也可轻松入门学习。
- 立即学习 2022/12/22 35:28
-
视频
- 最通俗易懂的html+css课程 9天速成
- HTML是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
- 立即学习 2022/12/23 05:56