移动端布局：HTML5+CSS3进阶加强版

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

本课程的目的是让大家能够掌握移动端布局，课程主要讲解了视口、二倍图、流失布局，flex布局，rem布局，响应式布局，还会增加摹客使用等工具。

难度：初级

共161章节

38359次播放

第1章 H5C3加强: HTML5导读
01:30; vscode基本使用
15:21; vscode插件安装
11:30; 什么是HTML5
04:53; HTML5新增标签
09:30; 多媒体音频标签
12:10; 多媒体视频标签
15:03; HTML5新增input标签
12:02; HTML5新增表单属性
12:32; HTML5小结
06:52; CSS3导读
02:39; CSS3属性选择器（上）
11:18; CSS3属性选择器（下）
10:46; CSS3结构伪类选择器（上）
06:19; nth-child(n)
12:47; nth-child和nth-of-type的区别
10:22; 结构伪类选择器总结
02:02; CSS3伪元素选择器
08:48; 伪元素选择器案例
09:26; 2D转换之translate
13:07; 让一个盒子水平垂直居中
09:18; 2D转换之rotate
05:55; CSS3三角
07:23; 设置转换中心点
06:09; 旋转中心点案例
06:56; 2D转换之scale
06:56; 图片放大案例
11:07; 分页按钮案例
03:20; 2D转换综合写法以及顺序问题
05:38; 2D转换小结
03:06; CSS3动画基本使用
08:56; 动画序列
12:41; CSS3动画常见属性
16:08; CSS3动画简写
07:17; 大数据热点图案例（上）
14:08; 大数据热点图案例（下）
14:10; 速度曲线之steps步长
08:28; 奔跑的熊大案例
14:25; 认识3D转换
05:20; 3D转换translate3d
07:57; 透视perspective
08:53; translateZ
09:23; 3D旋转rotateX
09:43; 3D旋转rotateY
03:55; 3D旋转rotateZ
05:50; 3D呈现transform-style
11:03; 两面翻转盒子案例
12:57; 3D导航栏（上）
12:26; 3D导航栏（下）
10:48; 综合案例-旋转木马案例（上）
08:40; 综合案例-旋转木马案例（下）
08:34; 浏览器私有前缀以及总结
第2章流式布局: 移动WEB开发流式布局导读
01:59; 移动端基础
09:31; 视口
09:02; meta视口标签
06:53; 物理像素与物理像素比
08:45; 二倍图
12:13; 背景缩放background-size
10:46; 背景二倍图以及多倍图切图
05:38; 移动端开发选择
04:32; 移动端技术解决方案
10:29; 移动端特殊样式
04:53; 移动端技术选型
03:40; 流式布局
10:32; 京东移动端首页准备工作
06:58; body设置
06:29; app布局
08:29; app内容填充
07:01; 搜索模块布局
09:16; 搜索模块内容制作
08:44; 二倍精灵图的做法
08:15; 焦点图制作; 品牌日模块制作
07:28; 导航栏nav模块制作
11:22; 新闻快报模块
07:22; 京东移动端首页结束2
第3章 flex: 移动WEB开发flex布局导读
01:14; flex布局体验
07:02; flex布局原理; flex设置主轴方向
08:14; justify-content设置主轴子元素排列; flex-wrap子元素是否换行
04:57; align-items设置侧轴子元素排列; align-content设置侧轴子元素排列; flex-flow以及总结; 子项flex属性使用
14:31; align-self和order
04:47; 携程移动端首页准备工作; 首页布局分析以及搜索模块布局; 搜索模块user制作; 搜索模块制作search制作; 焦点图focus模块制作; local-nav布局; local-nav内容制作; 利用属性选择器更换背景图片
04:44; nav外观布局; nav内容制作; 背景渐变linear-gradient; subnav-entry模块制作; 热门活动模块制作; 更多福利模块制作; sales-bd模块制作3
第4章 rem布局: 移动WEB开发rem适配布局导读
01:20; rem单位
11:13; 媒体查询语法简介
09:58; 媒体查询案例背景变色
12:20; 媒体查询+rem实现元素动态大小变化
07:41; 媒体查询引入资源
09:12; CSS的弊端
05:22; LESS简介以及使用变量
09:04; less编译easyless插件
08:56; less嵌套
10:17; less运算
05:57; rem适配方案原理
11:53; rem最终适配方案
11:45; 苏宁首页common.less制作
04:43; 苏宁首页import导入样式
04:03; 苏宁首页body样式设置
07:28; 苏宁首页search-content模块布局
09:02; 苏宁首页search-content内容布局; 苏宁首页-search模块制作; 苏宁首页banner和广告模块制作; 苏宁首页nav部分制作; rem适配方案2flexble.js简介; rem适配方案2苏宁首页前期准备工作; rem适配方案2body样式修改; 一个神奇的vscode插件cssrem; 修改flexible默认html字体大小; rem适配方案2 search-content内容制作1; rem适配方案2 search-content内容制作2
第5章响应式布局: 移动web开发响应式导读
02:47; 响应式开发原理
03:01; 响应式布局容器
12:23; 响应式导航案例
06:11; Bootstrap简介
10:08; Bootstrap使用（上）
08:31; Bootstrap使用（下）
05:17; Bootstrap布局容器
03:51; Bootstrap栅格系统
04:58; Bootstrap栅格系统使用（上）
12:38; Bootstrap栅格系统使用（下）
06:28; Bootstrap列嵌套
08:07; Bootstrap列偏移
08:06; Bootstrap列排序
03:21; Bootstrap响应式工具
06:22; 阿里百秀需求分析
05:59; 阿里百秀前期准备工作
03:58; 修改container最大宽度
03:50; 阿里百秀logo制作
08:02; 阿里百秀nav制作引入字体图标
08:32; 阿里百秀news制作（上）
12:20; 阿里百秀news制作（下）
03:24; 阿里百秀publish模块制作
11:50; 阿里百秀aside模块制作; 阿里百秀logo响应式制作
09:27; 阿里百秀nav响应式制作
04:51; 阿里百秀news响应式制作
05:35; 阿里百秀publish响应式制作
05:04; 移动端开发总结
03:07

讲师介绍

王林: 学生

能学到什么:: 本课程的目的是让大家能够掌握移动端布局，课程主要讲解了视口、二倍图、流失布局，flex布局，rem布局，响应式布局，还会增加摹客使用等工具。

移动端布局：HTML...移动端布局：HTML...
下载

取消回复发送

PHP中文网