入门级选手浅写一下关于前端的知识点

最新推荐文章于 2024-09-13 10:46:15 发布

YJ_YJ_YJ_

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量356

点赞数 4

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/YJ_YJ_YJ_/article/details/127166604

版权

字体图标是如何引入的

第一步先引入字体的css样式

第二步设置字体图标类名 iconfont(固定类名) icon-gouwuchekong(所选字体图标类名)

<!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>
    <!-- 第一步引入字体的css样式 -->
    <link rel="stylesheet" href="./download/font_3685754_wl5fo345j4/iconfont.css">
    <style>
        /* 字体图标为字体样式,设置属性与字体一致 */
        .icon-gouwuchekong{
            font-size: 20px !important;
            color: #fd3f01;
        }
    </style>
</head>
<body>
    <div class="box">
<!-- 第二步设置字体图标类名 iconfont(固定类名) icon-gouwuchekong(所选字体图标类名) -->
<i class="iconfont icon-gouwuchekong"></i>
<span>购物车</span>
<i class="iconfont icon-arrow-down"></i>
    </div>
    
</body>
</html>

2d位移

2d位移就是在平面状态下移动盒子

可以用单方向位移如:

单方向位移x

transform: translateX(400px);

单方向位移y

transform: translateY(400px);

也可以使用综合写法:

transform: translate(400px,400px);

<!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>
        /* 2d位移就是在平面状态下移动盒子 */
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            /* 2d位移   tranform:tranlate(x,y) */
            transform: translate(400px,400px);
            /* 单方向位移x */
            /* transform: translateX(400px); */
            /* 单方向位移y */
            /* transform: translateY(400px); */

            
            /* 注意点:使用多次单方向位移会覆盖前面的位移 */
        }
    </style>
</head>
<body>
    <div class="box">

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

margin与2d位移的区别:

注意点

1.外边距移动的100%是父元素的100%,2d移动100%是他自己大小的100%

2.外边距移动盒子会影响到它下面的元素,2d移动不会影响到它下面的元素,不脱离标准流

<!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>
        .one{
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* 外边距margin移动盒子 */
            margin-left: 100%;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: blue;
            /* 2d位移 移动盒子 */
            transform: translateX(100%);
        }
        /* 注意点
        1.外边距移动的100%是父元素的100%,2d移动100%是他自己大小的100%
        2.外边距移动盒子会影响到它下面的元素,2d移动不会影响到它下面的元素,不脱离标准流 */
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

旋转

改变旋转中心(transform-origin) 默认在盒子中间

transform-origin的三种写法:

方位名词:left right top bottom

transform-origin: left;

数字+px

transform-origin: 100px 50px;

百分比

transform-origin: 50% 150%;

<!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: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
        }
        .box img{
            width: 200px;
            transition: all 20s;

            /* 改变旋转中心  默认在盒子中间 */
            /* 方位名词:left right top bottom */
            /* transform-origin:  left; */
            /* px */
            /* transform-origin: 100px 50px; */
            /* 百分比 */
            transform-origin: 50% 150%;
        }
        .box:hover img{
            /* 旋转  单位 deg度   turn一圈 */
            transform: rotate( 9999turn);

            /* 正值代表顺时针  负值代表逆时针 */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../老师的资料/images/hero.jpeg" alt="">
    </div>
</body>
</html>

移动旋转注意点:

要使用综合写法:transform: translateX(1300px) rotate(9999turn);

不然下一级会覆盖上一级的transform

还有是先位移再同时旋转,旋转时会改变方位所以必须先位移

<!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,
        .one{
            width: 1300px;
            height: 481px;
            border: 1px solid #000;
        }
        img{
            transition: all 5s;
        }
        .box:hover img{
            transform: translateX(1300px) rotate(9999turn);
        }
        .one:hover img{
            transform: translateX(1300px) rotate(9999turn);
        }
    </style>
</head>
<body>
    <div class="box">
<img src="../老师的资料/images/heart.png" alt="">
    </div>
    <div class="one">
<img src="../老师的资料/images/tyre.png" alt="">
    </div>
</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>Document</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
            background-image: linear-gradient(red,aqua,yellow,green,blue);
            /* to(到哪里去...)属性  改变渐变色方向 */
            background-image: linear-gradient(to right,red,aqua,blue);
              /* 不能用to属性,换成deg */
              background-image: linear-gradient(45deg,red,aqua,blue,yellow);
              
              /* 几个常用背景色 */
            }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>