移动web第一天

最新推荐文章于 2022-06-05 19:41:18 发布

Don't complain-

最新推荐文章于 2022-06-05 19:41:18 发布

阅读量372

点赞数 2

分类专栏：移动web 文章标签：前端

本文链接：https://blog.csdn.net/m0_61381982/article/details/121551569

版权

移动web 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

系列文章目录

移动web第一天

移动web第二天

移动web第三天

移动web第四天

移动web第五天

移动web第六天

移动web第七天

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

前言

一.字体图标

（1）什么是字体图标？

字体图标展示的是图标，本质是字体。

处理简单的、颜色单一的小图标

（2）字体图标的优点是什么？

灵活性：灵活的修改样式，尺寸颜色等

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

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

（3)怎么去使用字体图标呢？

1.首先下载字体包：

2.复制相关的文件，到 fonts文件夹里面。

3.在自己的html文件中引入fonts文件夹里的css文件

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

4.如果是一个标签来使用字体文件，可以采取2个类名的形式。（重点）

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

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

5.如果使用unicode编码(了解)

<strong> &#xe8ab; </strong>

css

 strong {
      font-family: 'iconfont';
}

6.如果是伪元素：

<div class="car1">购物车</div>

css

.car1::before {
    content: '\e8c6';
    color: blue;
    margin-right: 5px;
    font-family: "iconfont" !important;
}
.car1::after {
    content: '\e665';
    font-family: "iconfont" !important;
}

二.平面转换

(1) 什么是平面转换？

平面转换

1.改变盒子在平面内的形态（位移、旋转、缩放）

2.2D转换

平面转换属性：

transform

（2）位移

1.语法

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

2. 取值（正负均可）

像素单位数值

百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

3. 技巧

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

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

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);

4.可以配合绝对定位来使盒子水平垂直居中效果

.father {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    margin: 100px auto;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 百分比，往上走盒子自己高度的一半，往左走盒子宽度的一半 */
    transform: translate(-50%, -50%);
    width: 199px;
    height: 199px;
    background-color: skyblue;
}

5.跟margin有何区别？

margin移动盒子会影响其余的盒子。把其他人挤走
位移translate移动盒子不会影响其他的盒子。不脱标。

这里给大家带来一个案例

要求鼠标碰到盒子左右两边的车分别向两侧拉开

效果图

那么如何完成呢下面给大家带来源代码

<!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-sizing: border-box;
        }
        .box{
            width: 1366px;
            height: 600px;
            margin: 100px auto;
            background: url(../images/bg.jpg) no-repeat;
        }
        .box::before,
        .box::after{
            content: '';
            width: 50%;
            height: 600px;
            background: url(../images/fm.jpg) no-repeat;
            transition: all .5s;
            
        }
        .box::before{
            content: '';
            float: left;
        }
        .box::after{
            content: '';
            float: right;
            background: url(../images/fm.jpg) no-repeat 100% 0; 
        }
        .box:hover.box::before{
transform: translate(-80%, 0);
        }
        .box:hover.box::after{
            transform: translate(80%, 0);
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

（3）旋转

1.语法

transform: rotate(角度);

注意：角度单位是 deg

2. 技巧：取值正负均可

取值为正 , 则顺时针旋转

取值为负 , 则逆时针旋转

3.使用 transform-origin 属性改变转换原点

语法

默认圆点是盒子中心点

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

取值

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

像素单位数值

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

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>
    <style>
        img{
            transition: all 8s;
        }
        img:hover{
            transform: rotate(360deg);
            /* 改变旋转的中心点 */
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
    <img src="../images/rotate.png" alt="">
</body>
</html>

（4）缩放

1.语法transform: scale(x轴缩放倍数, y轴缩放倍数);

2. 技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

transform: scale(缩放倍数);

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

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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 249px;
            height: 186px;
            margin: 100px auto;
            /* background-color: pink; */
          
        }
        .box .pic{
            overflow: hidden;
            position: relative;
            height: 135px;
        }
        .pic img:first-child{
            width: 100%;
            height: 100%;
        }
        .pic .piay{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%) scale(5);
            opacity: 0;
            transition: all .5s;
        }
        .box:hover .piay{
            transform: translate(-50%,-50%) scale(1);
            opacity: 1;
        }
        .box p{
            display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
        }
        .box p a{
            font-size: 18px;
            text-decoration: none;
            color: #000;
        }
        .box:hover a{
            color: orange;
        }
    </style>
</head>
<body>
   <div class="box">
       <div class="pic"><img src="../images/1.jpg" alt="">
    <img src="../images/play.png" alt="" class="piay"></div>
       <p><a href="">和平精英×Wooderful life联名蓝牙播放器，开启和平光影工厂的奇妙冒险</a></p>
   </div> 
</body>
</html>

三.渐变

目标：使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

语法

background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));

四.综合案例

（1）华为官网模块

https://www.huawei.com/cn/

源代码

<!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>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1400px;
            height: 320px;
            /* background-color: pink; */
            margin: 100px auto;
        }

        .box ul li {
            overflow: hidden;
            position: relative;
            float: left;
            width: 450px;
            height: 320px;
            /* background-color: green; */
        }

        .box ul li:nth-child(2) {
            margin: 0 25px;
        }

        .box ul li img {
            width: 100%;
            height: 100%;
            transition: all .5s;
        }

        .box li:nth-child(1):hover img {
            transform: scale(1.05);
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        }

        .box li:hover .text {
            bottom: 0;
        }

        .box li:nth-child(2):hover img {
            transform: scale(1.05);
        }

        .box li:nth-child(3):hover img {
            transform: scale(1.05);
        }

        .text {
            position: absolute;
            left: 0;
            bottom: -60px;
            padding: 25px 30px;
            font-size: 18px;
            color: #fff;
            transition: all .5s;
        }

        .text h4 {
            font-weight: 700;
            font-size: 24px;
            margin: 5px 0;
        }

        .text .more {
            margin-top: 20px;
            opacity: 0;
        }

        .box li:hover .more {
            opacity: 1;
        }

        .text .more span {
            color: red;
        }

        .text .yanse {
            color: #999;
        }

        .box li:nth-child(1):hover span {
            margin-right: 8px;
        }
        a::before{
            z-index: 1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 450px;
            height: 320px;
            background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
            opacity: 0;
        }
        .box li:hover a::before{
            background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <img src="../images/1.jpg" alt="">
                    <div class="text">
                        <p>产业趋势</p>
                        <h4>无线网络未来十年十大产业趋势</h4>
                        <p class="yanse">白皮书提出了面向2030无线网络的10大产业趋势</p>
                        <p class="more">了解更多 <span class="iconfont icon-arrow-right"></span> </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#"><img src="../images/2.jpg" alt="">
                    <div class="text">
                        <p>成功故事</p>
                        <h4>以“青海湖”之名，再造青海</h4>
                        <p class="yanse">
                            看全球最大可再生能源基地如何给出答案
                        </p>
                        <p class="more">了解更多 <span class="iconfont icon-arrow-right"></span> </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#"> <img src="../images/3.jpg" alt="">
                    <div class="text">
                        <p>全球产业展望</p>
                        <h4>华为发布《智能世界2030》报告</h4>
                        <p class="yanse">
                            无界探索，翻开未来
                        </p>
                        <p class="more">了解更多 <span class="iconfont icon-arrow-right"></span> </p>
                    </div>
                </a>
            </li>
        </ul>
    </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-sizing: border-box;
        }

        li {
            list-style: none;
        }

        .box {
            width: 1310px;
            height: 180px;
            /* background-color: pink; */
            margin: 100px auto;
        }

        .box li {
            overflow: hidden;
            position: relative;
            float: left;
            width: 320px;
            height: 180px;
            margin-right: 10px;

            /* background-color: blue; */

        }

        .box li:last-child {
            margin-right: 0;
        }

        .box li img {
            width: 100%;
            height: 100%;
        }

        .box li:hover img {
            transition: all .2s;
            transform: scale(1.1);
        }

        .box1 {
            position: absolute;
            top: 0;
            left: 0;
            width: 320px;
            height: 180px;
            text-align: center;
            opacity: 0;
            transition: all .5s;
        }

        .box1 p {
            font-size: 14px;
            color: #999;

        }

        .box h3 {
            font-weight: 400;
            font-size: 26px;
            color: orange;
            padding-top: 50px;
        }

        .box2 {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 320px;
            height: 180px;
            opacity: 1;
            color: #fff;
            text-align: center;
        }

        .box2 p {
            margin-top: 150px;
        }

        .box li:hover .box1 {
            opacity: 1;
        }

        .box li:hover .box2 {
            opacity: 0;
        }

        .box li:hover {
            border: 2px solid orange;
        }

        .box a::before {
            z-index: 1;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 320px;
            height: 180px;
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            opacity: 0;
        }

        .box li:hover a::before {
            background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <img src="../images/16341073227688.jpg" alt="">
                    <div class="box1">
                        <h3>紫罗兰之誓-妲己</h3>
                        <p>法师</p>
                        <p>上线时间：2021-10-15</p>
                    </div>
                    <div class="box2">
                        <p>紫罗兰之誓-妲己</p>
                    </div>
                </a>
            </li>
            <li><a href="#"><img src="../images/16345411339259.jpg" alt="">
                <div class="box1">
                    <h3>紫罗兰之誓-妲己</h3>
                    <p>法师</p>
                    <p>上线时间：2021-10-15</p>
                </div>
                <div class="box2">
                    <p>紫罗兰之誓-妲己</p>
                </div></a></li>
            <li><a href="#"><img src="../images/16346207722387.jpg" alt="">
                <div class="box1">
                    <h3>紫罗兰之誓-妲己</h3>
                    <p>法师</p>
                    <p>上线时间：2021-10-15</p>
                </div>
                <div class="box2">
                    <p>紫罗兰之誓-妲己</p>
                </div></a></li>
            <li><a href="#"><img src="../images/16363601642842.jpg" alt="">
                <div class="box1">
                    <h3>紫罗兰之誓-妲己</h3>
                    <p>法师</p>
                    <p>上线时间：2021-10-15</p>
                </div>
                <div class="box2">
                    <p>紫罗兰之誓-妲己</p>
                </div></a></li>
        </ul>
    </div>
</body>

</html>