移动Web
移动web
  第一天
    全天目标
      使用字体图标简化网页中装饰性图标实现方式
      使用位移、缩放、旋转、渐变效果丰富网页元素的呈现方式
    字体图标
      目标
        使用字体图标简化网页中装饰性图标实现方式
      学习内容
        字体图标介绍
          iconfont图标库
          特点
            字体图标看起来是图，本质是字
            加载速度快
            兼容性高
            灵活性高
              通过字体属性控制样式
        下载
          登录后，选择目标图标，加入购物车
          在购物车中添加至项目后， 在项目中下载
        使用
          Unicode编码
            引入iconfont.css样式表
            标签粘贴Unicode编码
            标签调用类名iconfont
          类名
            引入iconfont.css样式表
            标签调用类名
              iconfont（font-family）
              icon-xx（图标对应的类名）
        svg上传
          作用： 图标库中的图标无法满足项目需求
          步骤
            1. 上传SVG图标
            2. 去除颜色提交
            3. 加购物车并下载使用
    平面转换
      目标
        使用位移、缩放、旋转、渐变效果丰富网页呈现方式
      学习内容
        平面转换介绍
          平面
            x和y 2条坐标轴组成的屏幕
            x轴正值向右
            y轴正值向下
          转换
            改变盒子形态
              位置
              角度
              大小
          属性： transform
        位移
          translate(x, y)
          translateX()
          translateY()
        定位盒子居中
          定位
            绝对定位
            left：50%
            top：50%
          位移
            translate(-50%, -50%)
        旋转
          rotate(角度)
          单位：deg
          旋转方向
            正值：顺时针
            负值：逆时针
        转换中心点
          属性
            transform-origin
          取值
            关键词
              top
              bottom
              center
              left
              right
            百分比
            px
        多重转换
          定义
            同时改变盒子的多个形态
          注意
            旋转放在最后
            旋转会改变坐标轴向
        缩放
          scale(倍数)
          值
            大于1，表示放大
            小于1，表示缩小
    渐变
      目标
        使用background-image属性添加渐变背景效果
      学习内容
        基本写法
          background-image： linear-gradient(
颜色1,
颜色2,
......
);
        透明渐变
          background-image: linear-gradient(
transparent,
rgba(0, 0, 0, .6)
);
  第二天
    全天目标
      使用空间转换、动画效果丰富网页元素的呈现方式
    空间转换
      目标
        使用位移、缩放、旋转等空间转换效果丰富网页呈现方式
      学习内容
        空间转换介绍
          坐标轴
            X、Y、Z
            Z轴与用户视线方向重叠
          属性
            transform
        空间位移
          完整写法
            translate3d(x, y, z)
          某个坐标轴位移
            translateX()
            translateY()
            translateZ()
        透视
          作用
            产生近大远小，近实远虚的视觉效果
          概念
            视距：用户眼睛和屏幕的距离
          写法
            perspective: 值；
            添加给父级
            取值一般800-1200px之间
        空间旋转
          旋转
            rotateX()
            rotateY()
            rotateZ()
          左手法则
            左手握住旋转轴，大拇指指向坐标轴正值方向， 四根手指弯曲方向为旋转正值方向
        立体呈现
          作用
            让子级处于真正的3D空间内
          写法
            transform-style: preserve-3d;
            添加给父级
        缩放
          完整写法
            scale3d(x, y, z)
          某个坐标轴缩放
            scaleX()
            scaleY()
            scaleZ()
    动画
      目标
        使用关键帧动画效果，给网页元素添加动画特效，提升用户体验
      学习内容
        动画介绍
        基本使用
          定义动画
            @keyframes{
from {}
to {}
}
            @keyframes{
0% {}
20% {}
50% {}
100% {}
}
          使用动画
            animation: 动画名称 动画时长;
        animation属性
          复合属性
            写法
              animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；
            注意事项
              取值不分先后顺序
              必须赋值项：动画名称和动画时长
              若出现2个时间：第一个时间为动画时长， 第二个时间为延迟时间
          拆分写法（了解）
            animation-name：动画名称
            animation-duration：动画时长
            animation-delay：延迟时间
            animation-fill-mode：动画执行完毕时状态
              forwards：最后一帧状态
              backwards：第一帧状态（默认值）
            animation-timing-function：速度曲线
              steps(数字) : 逐帧动画
            animation-iteration-count：重复次数
              infinite：无限循环
            animation-direction：动画方向
              alternate：反向
            animation-play-state：动画播放状态
              paused：暂停
              通常配合:hover使用
        逐帧动画
          作用
            精灵动画
            搭配精灵图使用
          核心
            动画速度曲线为steps(N)
            N与精灵图小图个数相同
        多组动画
          作用：一个元素添加多个动画效果
          写法
            animation: 动画1，动画2，动画N；
  第三四天
    全天目标
      了解移动端与PC端屏幕和网页布局的差异，能够使用Flex布局模型布局移动端网页
    百分比布局
      目标
        了解百分比布局方案
      学习内容
        特点
          流式布局
          宽度自适应，高度固定
        布局方式
          宽度为半分比写法
    FLex布局
      目标
        使用Flex布局模型完成网页基本布局效果
      学习内容
        Flex的优势和特点
          浏览器提倡的布局模型，页面渲染性能高
          布局简单、方便
          避免浮动脱标的问题
          兼容性较高（不兼容低版本浏览器）
        组成部分
          弹性容器（父级， 添加display:flex的盒子）
          弹性盒子（子级）
          主轴（默认水平）
          侧轴（默认垂直）
        主侧轴对齐方式
          主轴
            justify-content
              center：居中
              space-between：间距出现在弹性盒子之间
              space-evenly：父子级间距都相同
              space-around：间距出现在弹性盒子两侧
                视觉效果: 子级之间的间距是父级左右两侧间距的2倍
          侧轴
            align-items（控制所有弹性盒子）
              center：居中
              stretch：默认值， 拉伸
            align-self（控制某个弹性盒子）
        弹性伸缩比
          flex: 整数数字;
          占用父级剩余尺寸的份数
  第五天
    全天目标
      使用rem布局方案，实现视口宽度不同，网页元素宽高等比缩放效果
    rem
      目标
        实现在不同宽度的设备中，网页元素尺寸等比缩放效果
      学习内容
        rem介绍
          相对单位，相对于HTML标签字号计算尺寸
          1rem = 1HTML标签字号
        基本使用
          1. 给HTML标签添加字号
          2. 设置元素尺寸为rem单位
        媒体查询基本使用
          视口不同，添加不同的根字号
          @media (视口宽度) {
差异化CSS样式
}
        rem布局流程
          1. 媒体查询添加根字号
            @media (视口宽度) {
html {
font-size: 37.5px;
}
}
          2. flexible添加根字号
            <script src="flexible.js"></script>
    less
      目标
        掌握Less常用语法
      学习内容
        less介绍
          CSS预处理器，让CSS具备逻辑和计算能力
          浏览器和网页不识别less，目前需要将less文件导出CSS文件，HTML引入CSS文件
        插件
          EasyLess
        语法
          注释
            单行
              // 注释内容
              ctrl + /
            块
              /* 注释内容 */
              alt + shift + A
          嵌套
            作用
              生成后代选择器
            写法
              父选择器 {
子选择器{}
}
              &
                表示当前选择器， 不会生成后代选择器
          运算
            作用
              完成常用数学计算
            写法
              除法
                (xx / xx)
                xx ./ xx
          变量
            作用
              存储数据，方便修改和使用
            用法
              1. 定义变量
                @变量名: 值;
              2. 使用变量
                CSS属性: @变量;
          导入
            作用
              引入其他less文件
            写法
              @import: ‘文件及路径’;
          导出
            导出CSS文件
              控制所有Less导出路径
                修改EasyLess插件
                  1. 设置 → 搜索easy → 在settings.json中编辑
                  2. 添加代码："out": "目标存储路径"（文件夹以/结束）
              单独控制某个Less文件导出路径
                less文件第一行添加 // out：路径
            禁止导出CSS文件
              less文件第一行添加： // out: false
  第六天
    全天目标
      使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果
    vw / vh
      目标
        使用vw布局方案，实现视口宽度不同，网页元素宽高等比缩放效果
      学习内容
        vw和vh基本使用
          vw和vh为相对单位，相对视口尺寸计算结果
          1vw = 1/100视口宽度
          1vh = 1/100视口高度
        布局流程
          1. 根据设计稿确定1vw尺寸
          2. px单位转换成vw单位尺寸
            px / (1/100视口宽度)
        vh弊端
          vh是相对视口高度计算尺寸
          需要考虑全面屏，视口高度尺寸偏大
  第七天
    全天目标
      了解响应式网页特点，知道响应式布局的核心技术：媒体查询的用法
      了解BootStrap框架使用方法和手册用法，能够使用BootStrap框架开发响应式网页
    媒体查询
      目标
        能够使用媒体查询写法，检测不同的响应断点，设置差异化CSS样式
      学习内容
        max-width / min-width
        书写顺序
        案例
          隐藏效果
        其他写法
          完整写法
          link写法
    BootStrap
      目标
        掌握BootStrap框架基本用法
        掌握BootStrap框架手册用法
      学习内容
        BootStrap介绍
          UI框架
          封装了大量的HTML、CSS、JavaScript，只需要按照框架要求书写代码，即可快速完成对应的效果
        下载
          生产环境
            压缩的代码
            开发可以直接使用
          less源码
            基于less的源码包
            可学习使用
        使用
          全局CSS样式
            栅格系统
              介绍
                作用：响应式布局
              原理
                将网页等分成12等分，每个元素占对应的份数
              使用
                大屏
                  响应断点
                    >= 1200px
                  类前缀
                    col-lg-*
                  版心
                    1170px
                中屏
                  响应断点
                    >= 992px
                  类前缀
                    col-md-*
                  版心
                    970px
                小屏
                  响应断点
                    >= 768
                  类前缀
                    col-sm-*
                  版心
                    750px
                超小屏
                  响应断点
                    < 768px
                  类前缀
                    col-xs-*
                  版心
                    100%
            标签样式
              表格
              按钮
              .....
          组件
            作用：封装常见功能的HTML+CSS
            分类
              布局组件
                1. 引入样式表
                2. 复制粘贴结构，修改内容
              字体图标
                1. 引入样式表
                2. 空标签粘贴类名
          插件
            介绍
              封装了常见功能的交互效果，包含HTML、CSS、JavaScript
            使用步骤
              1. 引入样式表
              2. 引入js
                2.1 jQuery.js
                2.2 bootstrap.js
              3. 复制结构，修改内容
          定制
            作用：针对项目定义bootstrap框架
            步骤
              1. 导航菜单：定制
              2. 输入对应的Less变量值
              3. 编译并下载，使用新框架