移动web学习笔记

最新推荐文章于 2024-06-14 11:01:38 发布
最新推荐文章于 2024-06-14 11:01:38 发布
阅读量107 收藏
点赞数
分类专栏： 学习笔记 文章标签： 前端 学习 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stevetagelian/article/details/124738046
版权

字体图标

优点

  1. 灵活 随时修改颜色和尺寸
  2. 轻量级 体积小
  3. 兼容性好

使用方式

  1. Font-classs使用法

    <!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>
    //引入iconfont
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    //添加class
    <span class="iconfont icon-add"></span>
</body>
</html>

  2. 购物车普通做法

    <!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;
      }
      .icon1 {
        color: #ff4403;
      }
    </style>
  </head>

  <body>
    <a href="#">
      <i class="iconfont icon-gouwucheman icon1"></i>
      购物车
      <i class="iconfont icon-jiantou9"></i>
    </a>
  </body>
</html>

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uy3yhNAV-1652355105185)(移动web.assets/image-20220316140029943.png)]

  3. 购物车搭配伪元素做法

    <!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;
      }
    </style>
  </head>

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

  4. 在线引入字体图标

    <!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>
    <!-- 在线引入字体图标，注意前面要加http: -->
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"
    />
  </head>

  <body>
    <i class="iconfont icon-zhaoxiangji"></i>
  </body>
</html>

平面转换

优点

  1. 改变盒子在平面的形态（位移，旋转，缩放）
  2. 2d转换

使用方式

  1. 实现元素位移效果

    • 语法

      transform: translate(水平移动距离, 垂直移动距离);

    • 取值（正负均可）

      像素单位数值，百分比（参照物为盒子自身尺寸），注意：X轴正向为右，Y轴正向为下

    • 技巧

      translate()如果只给出一个值, 表示x轴方向移动距离

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

  2. 实现元素旋转效果

    • 语法

      transform: rotate(角度);注意：角度单位是deg

    • 技巧

      取值正负均可

      取值为正, 则顺时针旋转

      取值为负, 则逆时针旋转

  3. 改变转换原点

    • 语法

      默认圆点是盒子中心点

      transform-origin: 原点水平位置 原点垂直位置;

    • 取值

      方位名词（left、top、right、bottom、center）

      像素单位数值

      百分比（参照盒子自身尺寸计算）

  4. 改变元素的尺寸

    • 语法

      transform: scale(x轴缩放倍数, y轴缩放倍数);

    • 技巧

      一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放：transform: 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>位移-基本使用</title>
    <style>
      .box {
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 4px solid #000;
      }

      .son1 {
        width: 200px;
        height: 100px;
        background-color: tomato;
        /* 过渡 */
        transition: all 0.5s;
      }

      .son2 {
        width: 200px;
        height: 100px;
        background-color: #6cf;
        /* 过渡 */
        transition: all 0.5s;
      }

      /* 鼠标移入到父盒子，son1改变位置 */
      .box:hover .son1 {
        /* transform: translate(100px, 50px); */

        /* 百分比单位：参照物就是盒子自身 */
        /* transform: translate(50%, 50%); */

        /* transform: translate(-50%, -50%); */

        transform: translateX(100px);

        /* 
        transform可以改变盒子的层级关系，提高盒子的层级
        */
        /* transform: translateY(100px); */

        /* transform: translate(100px); */
      }

      span {
        /* transform: translateX(100px); */
        /* margin-left: 100px; */
      }
    </style>
  </head>

  <body>
    <div class="box">
      <div class="son1"></div>
      <div class="son2"></div>
    </div>
    <span>12345,上山打老虎</span>
  </body>
</html>

  2. 对定位元素居中

    <!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>
      .father {
        position: relative;
        width: 500px;
        height: 300px;
        margin: 100px auto;
        border: 4px solid #6cf;
      }

      .son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
    </style>
  </head>

  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

  3. 双开门

    <!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>
      .box {
        width: 1366px;
        height: 600px;
        background: url(./images/bg.jpg);
        margin: 50px auto;
        overflow: hidden;
      }
      .box::before,
      .box::after {
        float: left;
        content: "";
        width: 50%;
        height: 100%;
        background: url(./images/fm.jpg);
        /* 添加过渡：谁在变化，谁要过渡，就给谁添加 */
        transition: 1s;
      }
      .box::after {
        /* 背景位置，后面的方位名词，谁大就相对于谁 */
        background-position: right;
      }
      .box:hover::before {
        transform: translateX(-100%);
      }
      .box:hover::after {
        transform: translateX(100%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

  4. 旋转效果

    <!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>

  5. 转换原点

    <!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>

  6. 多重转换效果

    <!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>

  7. 和平精英缩放

<!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>

渐变

优点

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

使用方式

  1. 实现渐变背景效果

    • 语法

      background-image: Linear-gradient(颜色1,颜色2)

    • 取值范例

      background-image: Linear-gradient(transpparent,rgba(0,0,0,.6))

案例

  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>渐变背景</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>

  2. 产品展示

    <!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 {
        position: relative;
        width: 350px;
        height: 247px;
        line-height: 1.5;
        margin: 100px;
      }

      .box .title {
        position: absolute;
        left: 0;
        bottom: 0;
        color: #fff;
        padding: 20px;
        z-index: 3;
      }

      .box h5 {
        font-weight: 400;
      }

      /* 当鼠标移入盒子的时候，出现一个遮罩层，并且遮罩层的背景颜色是渐变的 */
      .box::after {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 100%;
        height: 100%;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
        opacity: 0;
        transition: 0.5s;
      }
      .box:hover::after {
        opacity: 1;
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/pic.png" alt="" />
      <div class="title">
        <h5>智能体</h5>
        <h4>打造行业智能体，共建全场景智慧</h4>
      </div>
    </div>
  </body>
</html>

空间转换

优点

实现元素在空间内的位移、旋转、缩放等效果

  • 空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
  • 空间转换也叫3D转换
  • 属性：transform

使用方式

  1. 使用translate实现元素空间位移效果
    • 语法
      • transform: translate3d(x, y, z);
      • transform: translateX(值);
      • transform: translateY(值);
      • transform: translateZ(值);
    • 取值（正负均可）
      • 像素单位数值
      • 百分比
  2. ：使用perspective属性实现透视效果
    • 属性（添加给父级）
      • perspective: 值;
      • 取值：像素单位数值， 数值一般在800 – 1200。
      • 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
    • 作用
      • 空间转换时，为元素添加近大远小、近实远虚的视觉效果
  3. 使用rotate实现元素空间旋转效果
    • 语法
      • transform: rotateZ(值);
      • transform: rotateX(值);
      • transform: rotateY(值);
    • 扩展
      • rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
      • x，y，z 取值为0-1之间的数字
  4. 使用transform-style: preserve-3d呈现立体图形
    • 实现方法
      • 添加 transform-style: preserve-3d;
      • 使子元素处于真正的3d空间
    • 呈现立体图形步骤
      1. 盒子父元素添加transform-style: preserve-3d；
      2. 按需求设置子盒子的位置（位移或旋转）
    • 注意
      • 空间内，转换元素都有自已独立的坐标轴，互不干扰

案列

  1. 空间位移

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-空间位移.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin: 200px auto;

        /* 设置在x轴方向上移动 */
        /* transform: translateX(-300px); */
        /* 设置在y轴方向上移动 */
        /* transform: translateY(-300px); */

        /* 设置在z轴上移动 */
        /* 记起来z轴方向 正方向 屏幕指向外面 */
        /* 
        默认情况下 不可能让div 飘出屏幕外面！！ 
        默认情况下 看不到 z轴上的变化
         */
        transform: translateZ(500px);
      }
    </style>
  </head>
  <body>
    <div>空间位移</div>
  </body>
</html>

  2. 透视效果

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-空间位移.html</title>
    <style>
      /* 
      视距
      设置 人的眼睛到被观察物体之前的距离 

      如何去使用
      1 代码规范  要给被观察的物体的父元素使用！！ 
       */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        /* 视距  一般随意的设置1000 */
        perspective: 1000px;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* transform: translateZ(500px); */

        /* 两行代码是等价的！！  */
        transform: translateX(100px) translateY(100px) translateZ(100px);
        transform: translate3d(100px, 100px, 100px);
      }
    </style>
  </head>
  <body>
    <div>空间位移</div>
  </body>
</html>
<!-- 
  当我们想要看见元素 在 z轴上的变化的时候 需要给被观察的物体添加 视距 1000px
 -->

  3. 空间旋转-X轴

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>04-空间旋转-X轴.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #666;
        text-align: center;
        padding-top: 300px;
        /* 
        元素近大远小 效果 
        视距 p 
        视距属性 要给被观察的元素添加 
         */

        perspective: 1000px;
      }
      img {
        transform: rotateX(0deg);
        transition: 2s;
      }
      img:hover {
        transform: rotateX(360deg);
      }
    </style>
  </head>
  <body>
    <img src="./images/pk1.png" alt="" />
  </body>
</html>

  4. 沿着多条对称轴旋转

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-空间旋转-Y轴</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #666;
        text-align: center;
        padding-top: 300px;
        perspective: 1000px;
      }
      img {
        /* 沿着任意的方向做方向 */
        /* transform: rotate3d(x,y,z,角度); */

        /* 矢量 两个点 可以确定方向还有长度！  */

        /* transform: rotate3d(x坐标,y坐标,z坐标,角度); */

        /* transform: rotate3d(1, 1, 0, 30deg); */
        /* transform: rotate3d(2, 1, 0, 30deg); */
        transform: rotate3d(1, 1, 1, 30deg);
      }
    </style>
  </head>
  <body>
    <img src="./images/pk1.png" alt="" />
  </body>
</html>

  5. 立方体

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-立方体.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        perspective: 1000px;
      }

      .box {
        /* 
        css3  3d层面 挺 酷炫 新的技术 
        浏览器 遗留下来的bug 对待！！ 
         */
        opacity: 0.9;
        width: 200px;
        height: 200px;
        position: relative;
        margin: 100px auto;

        /* 开启立体空间 */
        transform-style: preserve-3d;

        /* 任意轴 旋转 */
        /* transform: translateZ(300px) rotate3d(1, 1, 1, 60deg); */
        /* transform: translateZ(0px); */
        transition: 2s;
      }
      .box:hover {
        transform: rotateX(-90deg);
      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* opacity: 0.8; */
      }

      .front {
        background-color: salmon;

        /*  z轴 正 移动   +100 */
        transform: translateZ(100px);
      }
      .back {
        /*  z轴 负 移动   -100 */
        transform: translateZ(-100px);
        background-color: seagreen;
      }
      .left {
        transform: translateX(-100px) rotateY(90deg);
        background-color: lawngreen;
      }
      .right {
        transform: translateX(100px) rotateY(90deg);
        background-color: yellow;
      }
      .up {
        background-color: aqua;
        transform: translateY(-100px) rotateX(90deg);
      }
      .bottom {
        transform: translateY(100px) rotateX(90deg);
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="front">前</div>
      <div class="back">后</div>
      <div class="left">左</div>
      <div class="right">右</div>
      <div class="up">上</div>
      <div class="bottom">下</div>
    </div>
  </body>
</html>
<!-- 
  1 静态结构
    1 定一个父盒子 box 包装着6个小 平面 （立方体 有6个面）
    2 写6个面 
      1 先使用定位 来重叠在一起 （方便后面一个一个的调整他们的位置 构造立方体 ）

  2 使用 空间变换来实现 立方体！！ 
    1 前： z轴 正 移动   +100
    2 后： z轴 负 移动   -100  
    3 左： x轴 负 移动   -100  y轴 旋转  90deg
    4 右： x轴 正 移动   100   y轴 旋转  90deg
    5 上： y轴 负 移动  -100   x轴 旋转  90deg
    6 下： y轴 正 移动  100    x轴 旋转  90deg

  3 提前检查一下 有效果
    1 给box 开启立体空间效果-立体呈现 3d呈现  
    2 给box 旋转 
  4 同学做一件事
    1 拿到老师的代码的模版 也实现到 老师现在的案例的进度 即可 
 -->

  6. 3D导航

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-3D导航.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 300px;
        height: 40px;
        margin: 200px auto;
      }
      a {
        float: left;
        width: 100px;
        height: 40px;
        color: #fff;
        text-decoration: none;

        position: relative;

        transform-style: preserve-3d;

        transition: 1s;
      }
      a:hover {
        transform: rotateX(-90deg);
      }
      a div {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .up {
        background-color: orange;
        transform: translateY(-20px) rotateX(90deg);
      }
      .front {
        background-color: green;
        transform: translateZ(20px);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <a href="#">
        <div class="up">上</div>
        <div class="front">前</div>
      </a>
      <a href="#">
        <div class="up">上</div>
        <div class="front">前</div>
      </a>
      <a href="#">
        <div class="up">上</div>
        <div class="front">前</div>
      </a>
    </div>
  </body>
</html>
<!-- 
  立方体
  1 控制多个面先定位 重叠在一起
  2 3d变换 构造立方体
    1 上： y轴的负方向 移动高度的一半  沿着x轴渲染90deg
    2 前： z轴的正方向 移动高度的一半  
  3 a标签开启 3d 立体空间 
  4 a标签鼠标移入 
    让a标签 沿什么轴 旋转  x 轴
    
 -->

动画

作用

  • 实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

定义动画

  • <style>
        @keyframes 动画名称 {
            from {}
            to {}
        }
</style>

  • <style>
        @keyframes 动画名称 {
            0% {}
            50%{}
            100%{}
        }
</style>

使用动画

  • animation: 动画名称 动画花费时间;

animation相关属性

属性作用取值
animation-name动画名称
animation-duration动画时长
animation-delay延迟时间
animation-fill-mode动画执行完毕时状态forwards：最后一帧状态，backwards：第一帧状态
animation-timing-function速度曲线steps(数字)：逐帧动画
Linear:匀速
animation-iteration-count重复次数infinite为无限循环
animation-direction动画执行方向alternate为反向（配合infinite可以来回播放）
animation-play-state暂停动画paused为暂停，通常配合:hover使用

flex布局

用法

  • 设置父盒子属性display:flex
  • 父项可以设置主轴对齐方式（justify-content）
    • 子项左对齐 flex-start
    • 右对齐 flex-end
    • 居中对齐 center
    • 先两侧对齐，间隔存放 space-between
    • 间隔存放 - 两侧空间小于中间 space-around
    • 绝对平均 space-evenly
  • 父项设置换行属性(flex-wrap)
    • nowrap 不换行 默认
    • wrap 换行
  • 父项设置侧轴单行元素对齐方式（align-items）
    • center 居中
    • flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
    • flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
    • baseline 元素位于容器的基线上。
    • stretch 默认值。元素被拉伸以适应容器。
  • 父项设置侧轴多行元素对齐方式（align-content）
    • 取值与justify-content一样
  • 父项设置主轴方向（flex-direction）
    • row 默认值 左到右
    • row-reverse 右到左
    • column 上到下（常用）
    • column-reverse 下到上
  • 子项相关属性
    • flex 设置 子项占父项宽度（高度）的比例
    • align-self 设置子项自己 在侧轴上的对齐方式
      • flex-start
      • flex-end
      • center

子元素的变化

  • 不再区分行内，行内块，块级元素，全部都可以设置宽度和高
  • 子项默认的宽度由内容撑开，默认的高度等于父高
  • 使用float没有效果
  • 默认情况下，子项总宽度大于父项的宽度时，不会换行，只会压缩子项的宽度

REM

是什么？

  1. rem大小相对于页面根标签的字体大小
  2. 不要去研究rem小于12的情况

如何使用？

  1. 下载插件px to rem & rpx
  2. 去到vscode的设置中添加代码
    • “cssrem.rootFontSize”:37.5 // 1rem = 设计稿的宽度 / 10
  3. 引用淘宝开发的flexible.js

Less

是什么？

  • 通过变量声明来控制css

怎么用？

  1. 下载插件 easy less

  2. 创建less文件

  3. 在less文件内编写代码，保存后通过插件会自动生成css文件

  4. 语法

    @+任意名称（有语义的英文）

    @color: yellow;

div {
    color: @color;
    border: 1px solid @color;
}

  5. less的样式计算

    div {
    width: 100px + 200px;
    width: 300px -200px;
    height:100px * 3;
    height: (300px / 3); //除法要加括号
}

  6. less的mixin语法

    • 作用：提取公共样式
    //定义一个mixin
.aaaa() {
    //存放公共样式
    background-image: url(1.png);
    background-size: 100%;
    background-repeat: no-repeat;
}
div {
    .aaaa();
    background-position: -300px 30px;
}
a {
    .aaaa();
    background-position: -400px 60px;
}

    • 函数式用法

      .aaaa(@a,@b) {
    background-image: url(1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: @a @b;
}
div {
    .aaaa(-300px,30px);
}

  7. 嵌套的伪元素语法

    div {
    height: 200px;
    background-color: skyblue;
    //& ----->连接符，不加生成的伪元素代码会有空格，造成语法错误
    &::before{
        content: "less实现的伪元素";
    }
}

  8. 嵌套

    • 语法按照html的结构即可
    div {
    height: 200px;
    background-color: skyblue;
    p {}
    > p {}//子代选择器 特指亲儿子，不改变孙子的样式
    span {}
    a {
        img {}
    }
}

媒体查询

是什么？

  • 解决响应式布局需求

响应式布局

  • 不同的屏幕宽度使用不同的css

如何使用？

//屏幕宽度为400px时改变Body颜色
@media(width:400px){
    body{
        background-color: yellow;
    }
}

  • 推荐写法

    @media screen and (width:400px){
    body{
        background-color: yellow;
    }
}

媒体查询-指定区间

  • 屏幕宽度小于100px

    @media screen and (max-width:100px){
    body{
        background-color: red;
    }
}

  • 屏幕宽度大于500px

    @media screen and (min-width:500px){
    body{
        background-color: green;
    }
}

  • 屏幕宽度大于300px小于500px

    @media screen and (min-width:300px) and (max-width:500px){
    body{
        background-color: yellow;
    }
}

BootStrap

是什么？

  • 响应式布局框架

栅格式布局

  1. 屏幕种类

    种类宽度名称
    大屏幕>1200pxlg
    中等屏幕992-1200md
    小屏幕768-992sm
    极小屏幕<768xs

引用方式

  1. 引入样式文件

     <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />

  2. 引入jquery.js

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

  3. 引入 bootstrap.js

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

使用方式

  1. 先写版心（写在父盒子）

    • container(居中)
    • container-fluid(全屏居中)

  2. 写行 .row

  3. 写栅格

    1. 分析当前要在什么屏幕下
    2. 每一列占几份

  4. 示例

    <div class="container">
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-6">2</div>
      </div>
</div>

:400px){
body{
background-color: yellow;
}
}


## 媒体查询-指定区间

- 屏幕宽度小于100px

```css
@media screen and (max-width:100px){
    body{
        background-color: red;
    }
}

  • 屏幕宽度大于500px

    @media screen and (min-width:500px){
    body{
        background-color: green;
    }
}

  • 屏幕宽度大于300px小于500px

    @media screen and (min-width:300px) and (max-width:500px){
    body{
        background-color: yellow;
    }
}

BootStrap

是什么？

  • 响应式布局框架

栅格式布局

  1. 屏幕种类

    种类宽度名称
    大屏幕>1200pxlg
    中等屏幕992-1200md
    小屏幕768-992sm
    极小屏幕<768xs

引用方式

  1. 引入样式文件

     <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css" />

  2. 引入jquery.js

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

  3. 引入 bootstrap.js

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

使用方式

  1. 先写版心（写在父盒子）

    • container(居中)
    • container-fluid(全屏居中)

  2. 写行 .row

  3. 写栅格

    1. 分析当前要在什么屏幕下
    2. 每一列占几份

  4. 示例

    <div class="container">
      <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-6">2</div>
      </div>
</div>
Stevetagelian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端学习笔记】移动web-黑马程序员学习笔记
张张张张张高高的博客
07-09 2672
该笔记是博主在b站学习的移动web-黑马程序员的学习笔记，记录自己的学习，资料均为免费获取，禁止商用。
树懒_移动开发学习笔记day01_Web_html
07-18
移动开发的初学者,全程记录自己的学习生活，笔记，为自己奋斗而努力！
移动web的学习笔记
qq_23939265的博客
04-11 204
移动web的学习笔记
Web学习笔记
wangwangduikexin的博客
10-19 1889
..
Web前端学习笔记
jusw123456的博客
10-19 2310
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3565
Web前端学习笔记（1）
移动通信相关知识学习笔记
CrystalShaw的博客
02-19 2006
移动无线的接入网是专指各种基站设备。核心网就是各种交换机。
神器webssh学习笔记
lxyoucan的博客
06-22 2066
简介 项目主页：https://github.com/huashengdun/webssh 一个简单的 Web 应用程序，用作 ssh 客户端以连接到您的 ssh 服务器。它是用 Python 编写的，基于 tornado、paramiko 和 xterm.js。 特征： 支持SSH密码认证，包括空密码。 支持 SSH 公钥认证，包括 DSA RSA ECDSA Ed25519 密钥。 支持加密密钥。 支持两因素身份验证（基于时间的一次性密码）。 支持全屏终端。 终端窗口可调整大小。 自动检测 ssh 服
Web笔记-移动前端开发笔记
IT1995的博客
02-16 4894
因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。 px(CSS pixels)：逻辑像素，浏览器使用的抽象单位； dp,pt(device independent pixels)：设备无关像素； dpr(devicePixelRatio)：设备像素放缩比； 计算公式：1px = (dpr)^2 * dp 下面先解释下dp，为设备像...
Java 学习笔记
weixin_42098295的博客
05-13 1957
Java 是一种面向对象的编程语言，广泛应用于开发各种应用程序，包括 Web 应用程序、桌面应用程序、移动应用程序和嵌入式系统。Java 中有八种基本数据类型：byte、short、int、long、float、double、char 和 boolean。集合用于存储和组织数据。Java 中有各种控制流语句，用于控制程序流程，例如 if-else 语句、switch 语句和循环语句。Java 中有各种运算符，用于执行算术运算、比较运算、逻辑运算和位运算。I/O 用于从文件、网络和其他来源读取和写入数据。
web前端最全笔记
qqyang_的博客
07-14 4255
#第一章 Web基础知识 Web开发基本概念 1、万维网是一个由许多相互链接的超文本组成的系统，通过互联网访问。 2、web：worldwideweb，万维网，简称web，www，通常称为网页。 3、web开发：进行网页页面制作及其阁下你给功能开发。 4、浏览器：显示网页内容，并让用户与这些文件交互 一种软件。（常用：IE、谷歌、火狐） 5、web服务器：提供web服务的计算机。 6、URL（统一资源定位符）：互联网上标准资源的地址，可以从互联网上得到资源的位置和访问方法。 组成...
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
03-19
Web 前端学习笔记：HTML5+CSS3+JavaScript.pdf 本书资源摘要信息为 Web 前端学习笔记：HTML5+CSS3+JavaScript.pdf，是一本涵盖了 Web 前端开发所需的知识的书籍。本书共 3 篇，涵盖了 HTML5、CSS3 及 JavaScript 等...
web前端开发笔记整理（一）
01-08
...1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 ... ...属性名不加双引号，属性值加双引号 标签的属性定义了与文档相关联...
2023年photoshop学习笔记.doc
11-06
Photoshop学习笔记 本篇笔记总结了Photoshop软件的学习笔记，旨在系统地掌握Photoshop软件的使用，提高软件操作能力。笔记分为三个部分：概括介绍部分、软件基础学习部分、软件归纳学习部分。 概括介绍部分对Photo...
netbeans学习笔记
10-12
IDE 常规教程 编辑特性 GUI 生成器 (Matisse) 插件（模块）开发 富客户端 (Rich Client) 平台（NetBeans 平台） Profiler Developer Collaboration ...核心 Web 应用程序开发 Struts 和 JavaServer Faces...移动性
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 404
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 569
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 296
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
最新发布
zhangwenok的博客
06-14 1275
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
linux详细学习笔记整理
05-31
Linux 学习笔记整理 一、Linux 简介 Linux，全称 GNU/Linux，是一种自由和开放源代码的类 Unix 操作系统，它主要是由 Linus Torvalds 在 1991 年创建的。Linux 操作系统具有多用户、多任务、多线程、支持多种文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值