• 课程 / HTML5

    移动端布局: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布局,响应式布局,还会增加摹客使用等工具。

    全部评论我要评论

    暂无评论~
  • 取消回复发送
  • PHP中文网