移动web

PC端网页和移动网页的不同：

pc屏幕大，网页固定版心
手机屏幕小，网页宽度多数为100%

分辨率分类

物理分辨率是生产屏幕时就固定的，它是不可被改变的
逻辑分辨率是由软件（驱动）决定的

制作网页参考逻辑分辨率

视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同。

注意：默认情况下，网页的宽度和逻辑分辨率不相同

目标：网页宽度和设备宽度(分辨率)相同。

解决办法：添加视口标签。
视口：显示HTML网页的区域，用来约束HTML尺寸。
/*viewport:视口 width=device-width:视口宽度=设备宽度 initial-scale=1.0:缩放1倍（不缩放） */

二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

图片分辨率, 为了高分辨率下图片不会模糊失真

动态加载多倍图

百分比布局

百分比布局，也叫流式布局
效果：宽度自适应，高度固定。

弊端：一旦元素数量增加，那么就要重新计算布局。

Flex布局（弹性布局）

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

(注意：可以使用定位、边距、变换，无法使用浮动)

作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

组成部分

（弹性盒子主轴默认沿水平方向=X，侧轴默认是垂直方向=Y）

使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式：align-content （取值与justify-content基本相同）

注：br标签起不到换行作用

换行案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .flex{
    width: 500px;
    height: 500px;
    background-color: aqua;
    margin: 0 auto;
    /* justify-content: center;
    align-items: center;*/
    display: flex; 
    flex-wrap: wrap;
    /* justify-content: space-between; */
}
.flex span{
    width: 50px;
    height: 50px;
    background-color: antiquewhite;
    justify-content: center;
    align-items: center;
    display: flex;
    
}
    </style>
</head>
<body>
    <div class="flex">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span>10</span>
        /*满行换行*/
    <span>11</span>
    
</div>
</body>
</html>

主轴（main-axis）对齐方式

修改主轴对齐方式属性： justify-content

space-around图：

space-around图

space-evenly图

侧轴/交叉轴（Cross axis）对齐方式

修改侧轴对齐方式属性: align-items

align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

父项的主轴和侧轴

①align-items设置侧轴对齐方式（单行）

center
flex-start
flex-end

②align-content设置侧轴对齐方式（多行）

flex-end
flex-start
center
space-between
space-around
space-evenly

子项的主轴和侧轴

修改主轴方向

属性：flex-direction

row 默认值水平方向从左到右（少用）

row-reverse 从右到左（少用了解）

column 从上到下（会用常用）

column-reverse 从下到上（了解）

盒子居中案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .flex{
    width: 500px;
    height: 500px;
    background-color: aqua;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    display: flex;
}
.flex span{
    
    width: 50px;
    height: 50px;
    background-color: antiquewhite;
    justify-content: center;
    align-items: center;
    display: flex;
    
}
    </style>
</head>
<body>
    <div class="flex">
    <span>1</span>
    
</div>
</body>
</html>

伸缩比

属性 flex：值（整数）

注意：只占父盒子剩余尺寸

设置子项占父项宽度的比例：

{
flex:1; /*设置每一个span宽度都占一份*/
}

弹性盒子总结

微信图片_20220319092004.png

字体图标

优点

灵活性：灵活地修改样式

轻量级：体积小、渲染快、降低服务器请求次数

兼容性：几乎兼容所有主流浏览器

使用方便：1、下载字体包。2、使用字体图标

使用方式

本地引入方式

①Unicode使用用法

引入样式表iconfont.css

  <link rel="stylesheet" href="./iconfont/iconfont.css" />

复制粘贴图标对应的Unicode编码

设置文字字体

span{
        font-family: 'iconfont'!important;
        font-size: 50px;
        color: coral;
        font-weight: 700;
      }



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>字体图标基本使用-类名</title>
  <!-- 1.引入iconfont.css文件 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <style>
    /* 3.声明字体图标库 */
    i {
      font-family: iconfont;
      font-style: normal;
      font-size: 50px;
      color: blue;
    }
    span{
      font-family: 'iconfont'!important;
      font-size: 50px;
      color: coral;
      font-weight: 700;
    }
  </style>
</head>

<body>
  <!-- 2.通过i标签把unicode编码复制过来 -->
  <i>&#xe600;</i>
  <span>&#xe62a;</span>
</body>
</html>

②Font class使用用法

引入字体图标样式表

<link rel="stylesheet" href="./iconfont/iconfont.css" />

调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等

icon-xxx：图标对应的类名

<span class="icon-yanjing iconfont"></span>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 1引入iconfont.css文件 -->
  <link rel="stylesheet" href="./iconfont/iconfont.css" />
  <style>
    .icon-yanjing{
      font-size: 20px;
      
    }
    .icon1 {
      font-size: 100px;
      color: antiquewhite;
    }
  </style>
</head>
<body>
  
  <i class="iconfont icon-hanbao icon1"></i>
  <span class="icon-yanjing iconfont"></span>
</body>
</html>

线上引入方式

点击在线生成在线地址

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3243638_9hzakjji7vq.css">
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
       </style>
  </head>

  <body>
  <span class="iconfont  icon-share"></span>
<span class="iconfont icon-time"></span>
<span class="iconfont icon-caidan"></span>
<span class="iconfont icon-aixin"></span>

  </body>
</html>

搭配伪元素使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      a {
        display: block;
        width: 200px;
        height: 50px;
        box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 30%);
        text-align: center;
        line-height: 50px;
        color: #333;
        text-decoration: none;
      }
      a::before {
        /* 设置字体图标库 */
        font-family: iconfont;
        content: "\e600";
        color: #ff4403;
        margin-right: 4px;
      }
      a::after {
        /* 设置字体图标库 */
        font-family: iconfont;
        content: "\e60b";
        margin-left: 4px;
      }
      /* font-css 实现原理：给对应 */
    </style>
  </head>

  <body>
    <a href="#">购物车</a>
  </body>
</html>

font-class原理：给对应的标签添加一个伪元素这个伪元素设置content属性属性值等于字体图标unicode编码

使用SVG上传成对应的字体图标

平面转换

效果

位移
旋转
缩放

一、位移

语法：transform：translate（水平移动距离，垂直移动距离）

取值（正负均可，注意：X轴正向为右，Y轴正向为下）

单独设置某个方向移动距离：translateX()&translateY()

使用方法

①使用translate居中（推荐）

原理：位移取值为百分比数值，参照盒子自身尺寸计算移动距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *,div{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .father{
            width: 150px;
        height: 150px;
        background-color: orange;
        position: relative;
        margin: 0 auto;

    }
    .son{
        width: 50px;
        height: 50px;
        background-color: pink;
        position: absolute;
        top: 50%;
        left: 50%;
        /* 以前 设置margin值 移动自身的宽度和高度的一半
            现在 位移 transform 百分比单位 相对于自身的宽度和高度 */
            transform: translate(-50%,-50%);
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

②使用margin居中

margin值移动自身的宽度和高度的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        *,div{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .father{
            width: 150px;
        height: 150px;
        background-color: orange;
        position: relative;
        margin: 0 auto;

    }
    .son{
        width: 50px;
        height: 50px;
        background-color: pink;
        position: absolute;
        top: 50%;
        left: 50%;
        /* 以前 设置margin值 移动自身的宽度和高度的一半
            现在 位移 transform 百分比单位 相对于自身的宽度和高度 */
            transform: translate(-50%,-50%);
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">

        </div>
    </div>
</body>
</html>

位移案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
     <style>

        *,div{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .father{
            width: 300px;
        height: 150px;
        background-color: orange;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }
    .son1,.son2{
        position: absolute;
        width: 50%;
        height: 100%;
        transition: all 1s;
    }
    .son1{
        background-color: cornflowerblue;
        left: 0;

    }
    .son2{
        background-color: cadetblue;
        right: 0;
    }
    .father:hover .son1{
        transform: translateX(-100%);
    }
    .father:hover .son2{
        transform: translateX(100%);
    }
    </style>
</head>
<body>
     <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>
</html>

效果

二、旋转

语法：transform:rotate(数值+deg)

取值（正负均可，正为顺时针；负为逆时针）

旋转案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>旋转效果</title>
    <style>
      img {
        width: 250px;
        /* 过渡 */
        transition: 2s;
      }

      img:hover {
        /* 顺时针旋转 360deg */
        transform: rotate(360deg);
        
        /* 逆顺时针旋转 360deg */
        /* transform: rotate(-360deg); */
      }
    </style>
  </head>

  <body>
    <img src="./images/rotate.png" alt="" />
  </body>
</html>

转换原点

语法：transform-origin

默认圆点是盒子中心点
transform-origin：原点水平位置原点垂直位置；

取法：

方位名词（left、top、right、bottom、center）
像素单位数值
百分比（参考盒子自身尺寸计算）

转换原点案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>转换原点</title>
    <style>
      img {
        display: block;
        width: 250px;
        border: 1px solid #000;
        margin: 200px auto;
        transition: all 3s;
        /* 旋转原点改变 */
        transform-origin: right top;
        /* transform-origin: -100px -100px; */
        /* transform-origin: -50% -50%; */
      }

      img:hover {
        transform: rotate(360deg);
      }
    </style>
  </head>

  <body>
    <img src="./images/rotate.png" alt="" />
  </body>
</html>

多重转换

语法：transform: tranlate() rotate();

原理：

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准！！

多重转换案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多重转换</title>
    <style>
      .box {
        width: 800px;
        height: 200px;
        border: 1px solid #000;
        margin: 200px auto;
      }

      img {
        width: 200px;
        transition: all 2s;
      }

      .box:hover img {
        /* 
        旋转会改变坐标轴向
        如果平移和旋转一起设置，要先写平移，再写旋转
         */
        transform: translate(600px) rotate(360deg);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/tyre1.png" alt="" />
    </div>
  </body>
</html>

注意：

三、缩放

语法：transfrom:scale(X轴缩放倍数 Y轴缩放倍数|百分比)

技巧：

scale值大于1表示放大，scale值小于1表示缩放

缩放案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .box {
        width: 250px;
        height: 200px;
        border: 1px solid #000;
        margin: 100px;
        line-height: 1.5;
        overflow: hidden;
      }

      .pic img {
        width: 100%;
      }
      .pic {
        position: relative;
      }
      .pic::after {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(5);
        content: "";
        width: 58px;
        height: 58px;
        background: url(./images/play.png);
        opacity: 0;
        transition: 1s;
        
      }
      .box:hover .pic::after {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="pic">
        <!--单标签没有伪元素，img除外，当图标加载失败的时候，伪元素才会显示 -->
        <img src="./images/party.png" alt="" />
      </div>
      <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
    </div>
  </body>
</html>

注意

渐变

语法：background-image:liner-gradien(transparent,rgba(0,0,0,.6));

                                        :liner-gradient(颜色1,颜色2);

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

渐变方向

语法：background-image:liner-gradient(to right/45deg,颜色1,颜色2)

/* background-image: linear-gradient(to right, #59c173, #a17fe0, #5d26c1); */
        background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1);

渐变案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渐变背景</title>
    <style>
      .box {
        width: 300px;
        height: 200px;
        border: 2px solid orange;

        /* 
        背景颜色渐变 bgi   background-image: linear-gradient(参数1, 参数2, 参数3, ....);
        参数1：
          方位：默认的方位从上到下
            1.方位名词：to right,to right bottom
            2.角度deg：直接写度数即可，不用再加to

        参数2：颜色1；
        参数3：颜色2；.....
         */
        /* background-image: linear-gradient(to right, #59c173, #a17fe0, #5d26c1); */
        background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1);
      }
    </style>
  </head>

  <body>
    <div class="box"></div>
  </body>
</html>

渐变是没有过渡效果

背景图片渐变有过渡效果但不完善慎用！！！（浏览器支持不够好）

图片标签没有过渡效果（需要定位+透明度实现过渡效果）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .boxtwo{
        position: relative;
        width: 350px;
        height: 247px;
    }
    .two{
        position: absolute;
        transition: all 1s;
        opacity: 1;

    }
    .three{
        position: absolute;
        transition: all 1s;
        opacity: 0;
    }


    .boxtwo:hover .two{
        opacity: 0;
    }
    .boxtwo:hover .three{
        opacity: 1;
    }
</style>
</head>
<body>
    <div class="boxtwo">
    <img src="image/pic2.png" class="two" alt="">
    <img src="image/pic3.png" alt="" class="three">
</div>
</body>
</html>

扩展内容：背景透明色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .background{
        width: 200px;
        height: 200px;

        /* 盒子连同背景和内容都变透明 */
        /* opacity: .2; */

        /* 背景会透明而文字不会透明 */
        /* background-color: rgba(0, 255, 255, 0.308); */

        /*  */
        /* background-color: transparent ; */

        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.3));


    }
 </style>
</head>
<body>
    <div class="background">
        背景颜色
    </div>
</body>
</html>

注意

课外知识点

空间转换

效果

位移
旋转
缩放

空间： x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。（空间转换也叫3D转换）

空间位移

语法(取值正负均可：像素/百分比)

transform:translate3d(x,y,z);
transform:translateX();
transform:translateY();
transform:translateZ();

透视效果

语法：perspective:值; （添加给父级，如body）

取值：素单位数值，数值一般在800 – 1200。

作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果。

（透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离）

透视案例

.div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    transform: translateZ(200px);
}
.div:hover{
     transform: translateZ(500px); 
}
body{
    perspective:1000px;
}

空间旋转

语法：

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

拓展： rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度 x，y，z 取值为0-1之间的数字左手法则：判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

旋转案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .div{
    font-size: 100px;
    text-align: center;
    line-height: 200px;
    color: aliceblue;


    width: 200px;
    height: 200px;
    background-color: aqua;
    /* transform: translateZ(200px); */
     
     /* transform: translate3d(80%,100px,100px); */
        
      /* transform: translateZ(200px) rotateX(0deg) ;
        先位移再旋转*/
     transform: rotateX(0deg) translateZ(200px);
        
     transition: all 10s;
    margin: 200px auto;
}
.div:hover{
    /* transform: translateZ(500px); */
    
    /*transform:  translateZ(500px) rotateX(360deg);
    先旋转再位移*/
    transform: rotateX(360deg) translateZ(500px);
}
body{
    perspective:1000px;
}

    </style>
</head>
<body>
    <div class="div">
        草
    </div>
</body>
</html>

立体呈现

语法：transform-style:preserve-3d;

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

呈现立体图形步骤

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）

正方体案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box {
        width: 200px;
        height: 200px;
        position: relative;
        margin: 100px auto;


        transform-style: preserve-3d;
        perspective-origin: 0px 0px;

        transform: rotate3d(1, 1, 1, 30deg);
      }

      .box > div {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0.9;
        font-size: 30px;
      }
        
         .front {
        background-color: #ff1703;
      }

      .back {
        background-color: #ffc629;
      }

      .left {
        background-color: #53ff27;
      }

      .right {
        background-color: #18ffe4;
      }

      .top {
        background-color: #0c00ff;
      }

      .bottom {
        background-color: #ff21cb;
      }
         /*将第一个div前移*/

      .front {
        transform: translateZ(100px);
      }

      /*第二个div后移*/

      .back {
        transform: translateZ(-100px) rotateY(180deg);
        /*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
        /*transform: rotateY(180deg) translateZ(100px);*/
      }

      .left {
        transform: translateX(-100px) rotateY(-90deg);
      }

      .right {
        transform: translateX(100px) rotateY(90deg);
      }

      .top {
        transform: translateY(-100px) rotateX(90deg);
      }

      .bottom {
        transform: translateY(100px) rotateX(-90deg);
      }
     </style>
</head>
<body>
     <div class="box">
            <div class="front">前面</div>
            <div class="back">后面</div>
            <div class="left">左边</div>
            <div class="right">右边</div>
            <div class="top">上面</div>
            <div class="bottom">下面</div>
          </div>
</body>
</html>

注意

空间缩放

语法：(3d缩放宽高厚度，2d缩放宽高)

transform: scaleX(倍数); 宽
transform: scaleY(倍数); 高
transform: scaleZ(倍数); 厚
transform: scale3d(x, y, z);

空间缩放案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *,div,ul,a,li,p,h1,h2,h3,h4,h5,h6{
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        box-sizing: border-box;
    }
        .box{
            width: 200px;
            height: 200px;
            /* background-color: #ff88ff; */
            position: relative;
            margin: 50px auto 10px;
            transform-style: preserve-3d;
            transform:rotate3d(1,1,0,360deg);
            transition: all 1s;
            /* animation: box 5s  linear infinite alternate; */
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
        }

        .box div{
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 200px;
            opacity: .8;
            transition: all 1s;
        }
        .box div:hover{
            transform: scale3d(2,2,2);
        }

        .fornt{
            background-color: #565656;
            transform: translateZ(100px) rotateY(0deg);
            
        }

        .after{
            background-color: #8f258f;
            transform: translateZ(-100px)  rotateY(180deg);

        }
        .left{
            background-color: #323ddb;
            transform: translateX(-100px) rotateY(270deg);
            
        }
        .right{
            background-color: #d61d73;
            transform: translateX(100px) rotateY(-270deg);
        }
        .top{
            background-color: #ddd23c;
            transform: translateY(-100px) rotateX(90deg);
        }
        .bottom{
            background-color: #11cea5;
            transform: translateY(100px) rotateX(-90deg);
        }
        .box:hover{
            transform: rotateX(-90deg);
        }
   
    </style>
</head>
<body>
    <div class="box">
        <div class="fornt">前</div>
        <div class="after">后</div>
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="top">顶</div>
        <div class="bottom">底</div>
    </div>
</body>
</html>

动画

实现步骤

1、定义动画

@keyframes 动画名称{
    from{}
    to{}
}
/*或者百分比*/
@keyframes 动画名称{
    0%{}
    100%{}
}

2、使用动画

animation: name duration timing-function delay iteration-count direction fill-mode;
/*动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态*/

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
若有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

animation-fill-mode:both;(同时都有forwards和backwards)

animation-timing-function:linear || ease || ease-in || ease-out || ease-in-out

（translate-timing-function:step()过渡也有跳转曲线）

注意：

实现逐帧动画

语法：animation-timing-function:steps(N) 将动画过程等分成N份

steps:跳跃速度曲线

精灵动画制作步骤

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
改变背景图的位置（移动的距离就是精灵图的宽度）
添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果

添加多个动画效果

<style>
animation:
    run 1s steps(12) infinite,
    move 3s linear forwards;
</style>
/*animation: 动画1，动画2，动画N;*/

逐帧案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* 逐帧动画 */
@keyframes run{
    to{
        background-position: -1680px;
    }
}
@keyframes move{
    to{
        transform: translateX(700px);
    }
}
.bg{
    position: absolute;
    width: 140px;
    height: 140px;
    /* border: 1px solid black; */
    background-image: url(./image/bg.png);
    animation: run 1s steps(12) infinite,/* 调用第一个让人物跑起来的动画 */
    move 3s linear forwards;
    /* 调用第二个让盒子右移的动画 */
    
}
    </style>
</head>
<body>
    <div class="bg">

</div>
</body>
</html>

走马灯案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .light{
    position: relative;
    width: 600px;
    height: 112.5px;
    border: 10px solid black;
    margin: 0px auto 0;
   
    overflow: hidden;
}
.light img{ 
    width: 200px;
    display: inline-block;
}
.light ul{
    position: absolute;
    width: 2000px;
    animation: light 10s infinite linear  ;
    
}
.light li{
    width: 200px;
    float: left;
    
}
@keyframes light{
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-1400px);
    }
}

.light:hover ul{
    animation-play-state: paused; 
}
    </style>
</head>
<body>
    <div class="light">
    <ul>
        <li><img src="image/1.jpg" alt=""></li>
        <li><img src="image/2.jpg" alt=""></li>
        <li><img src="image/3.jpg" alt=""></li>
        <li><img src="image/4.jpg" alt=""></li>
        <li><img src="image/5.jpg" alt=""></li>
        <li><img src="image/6.jpg" alt=""></li>
        <li><img src="image/7.jpg" alt=""></li>
/*当轮播过到底后会有空白部分 所以必须加三张图*/
        <li><img src="image/1.jpg" alt=""></li>
        <li><img src="image/2.jpg" alt=""></li>
        <li><img src="image/3.jpg" alt=""></li>
        
    </ul>
            
            
    </div>
</body>
</html>

精灵图在不同浏览器出现bug（浏览器的原因）

响应式应用

一般情况下，响应式布局不建议使用flex！(常用)

原因：

响应式布局包含了pc 和移动端，pc可能存在低版本浏览器（ie，8，9，10）
低版本pc端的ie浏览器，会css3的支持没有那么优化------flex无效

栅格系统

是bootstrap封装好的一种技术（媒体查询），更加方便的方式。

在使用bootstrap ui框架的时候，是不需要和以前一样写base.css来样式的初始化！！

（媒体查询+浮动就是 bootstrap 实现栅格系统的本质）

做引入框架的铺垫
- 引入样式
- 引入jquery.js
- 引入bootstrap.js
写栅格代码
- 先容器container（版心）或者container-fluid（版心）
- 再写行 row（会自动加上边距属性）
- 根据屏幕的种类以及每一列占的分数
若是只设置极小屏幕，比它大的屏幕默认会沿用它的设置

栅格参数

栅格案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-      scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<title>Document</title>
</head>
<body>

 <div class="container">
   <!-- 每列占3份  大屏幕下 -->
   <!-- 每列占4份 中屏幕下 -->
  <!-- 每列占6份 小屏幕下 -->
   <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">3</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">4</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">5</div>
       <div class="col-lg-3 col-md-4 col-sm-6 col-xm-2">6</div>
  </div>
  </div>  

 </body>

<script src="lib/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</html>

字体图标

<span class="glyphicon glyphicon-search" aria-hidden="true">123456</span>

导航条

导航条案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<title>Document</title>
</head>

<body>

<!-- 导航条 -->
<!-- 版屏 -->
<!-- <div class="container-fluid"> -->

<nav class="navbar navbar-default">
    <!-- 版心 -->
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
       </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    <!-- </div> -->

 </body>
<script src="lib/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</html>

轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<title>Document</title>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="..." alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          <div class="item">
            <img src="..." alt="...">
            <div class="carousel-caption">
              ...
            </div>
          </div>
          ...
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
</body>
<script src="lib/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</html>

屏幕量取

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<title>Document</title>
</head>
<body>

</body>
<script src="lib/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
</html>

长度单位

px和百分比一个是绝对长度另一个是相对长度单位

px是定死的大小

百分比是参考其他物体

VW、VH单位

(viewport width、viewport height)

vw、vh是相对于长度单位

vw：相对于视口宽度 ------------>1vw=1/100视口宽度，100vw等于屏幕宽度

vw单位的尺寸=px单位数值/（1/100视口宽度）

vh：相对于视口高度 ------------>1vw=1/100视口高度，100vh等于屏幕得高度

vh单位的尺寸=px单位数值/（1/100视口高度）

注意：px是绝对长度单位（固定不变），vw、vh是相对长度单位

作用

（需求：不同宽度的屏幕的适配）

计算

查看设计稿宽度 → 确定参考设备高宽度 (视口高宽度) → 确定vh、vw尺寸（1/100 视口高宽度）

(要适配的手机屏幕100vw）/设计稿的宽度=要适配的屏幕的div的宽度/设计稿的div的宽度

要适配的手机中div的宽度=（要适配的手机屏幕100vw）*设计稿的div的宽度/设计稿的宽度

若要计算c：a/b=c/d →（a/b）d=c →c=（ad）/b

1、要适配手机宽度（未知）；

2、设计稿的宽（已知）；

3、要适配手机中div的宽度（未知）；

4、设计稿中div的宽度（已知）；

思考：开发中，会不会vw和vh混用呢？

答：不会。 vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

REM单位

1rem大小是相对于页面根标签的字体大小像素

如果根标签（html）不设置字体大小，那么浏览器默认字体为16px，所以1rem=16px

（若根标签font-size=100px，那么1rem=100px）

最小12px（谷歌） 1px（火狐）

尽可能取值大于12px

计算

(要适配的手机屏幕10rem）/设计稿的宽度=要适配的屏幕的div的宽度/设计稿的div的宽度

要适配的手机中div的宽度=（要适配的手机屏幕10rem）*设计稿的div的宽度/设计稿的宽度

若要计算c：a/b=c/d →（a/b）d=c →c=（ad）/b

1、要适配手机宽度（未知）；

2、设计稿的宽（已知）；

3、要适配手机中div的宽度（未知）；

4、设计稿中div的宽度（已知）；

rem和vw/vh的区别

rem 市场比较常见：

需要不断修改html文字大小
需要媒体查询media
需要flexible.js

vw/vh 将来（马上）趋势

省去各种判断和修改：如b站

LESS

一种提高我们编写css效率的技术=> css预处理器（less，scss，stylues技术名词）

声明变量的语法为：@变量名：变量值；
声明混入Mixins函数的语法为：函数名（）{重复代码}

前端移动web基础点

移动web

分辨率分类

视口

二倍图

动态加载多倍图

百分比布局

Flex布局（弹性布局）

作用

组成部分

主轴（main-axis）对齐方式

侧轴/交叉轴（Cross axis）对齐方式

父项的主轴和侧轴

子项的主轴和侧轴

修改主轴方向

伸缩比

弹性盒子总结

字体图标

优点

使用方式

本地引入方式

①Unicode使用用法

②Font class使用用法

线上引入方式

搭配伪元素使用

使用SVG上传成对应的字体图标

平面转换

效果

一、位移

使用方法

①使用translate居中（推荐）

②使用margin居中

位移案例

二、旋转

旋转案例

转换原点

转换原点案例

多重转换

多重转换案例

三、缩放

缩放案例

渐变

渐变方向

渐变案例

扩展内容：背景透明色

课外知识点

空间转换

效果

空间位移

透视案例

空间旋转

旋转案例

立体呈现

正方体案例

空间缩放

空间缩放案例

动画

实现逐帧动画

逐帧案例

走马灯案例

响应式应用

栅格系统

栅格参数

字体图标

导航条

轮播图

屏幕量取

长度单位

VW、VH单位

作用

计算

REM单位

计算

rem和vw/vh的区别

LESS