不一样的CSS(一)

news2024/11/13 16:06:34

目录

前言:

一、规则图形

1.介绍:

2.正方形与长方形(实心与空心)

2.1正方形:

2.2长方形

3.圆形与椭圆形(空心与实心)

3.1圆形与椭圆形

4.不同方向的三角形

 4.1原理

4.2边框属性 

5.四分之一圆 

5.1原理:

5.2代码展示:

5.3结果展示

5.4四分之一空心圆 

6.二分之一圆

6.1原理:

 6.2代码展示:

6.3运行结果

7.圆环

二、不规则图型

1.梯形

1.1原理

1.2不同颜色边框代码:

 1.3梯形代码

2.直角梯形

2.1原理:

2.2代码示例

2.3运行结果如下所示:

3.五边形

3.1原理

3.2 代码示例

3.3 运行结果展示

4.六边形 

4.1原理

4.2代码示例

4.3 结果展示

5.六角形

5.1原理

5.2代码示例

5.3结果展示

6.八角形

6.1原理

6.2代码示例

6.3结果展示

7.十二角形

7.1原理

7.2代码实现

7.3结果示例:

三、结束语


前言:

css是我们用来美化我们的html的一种方式,包含了多种属性,内容,利用好css当中的属性,可以让我们更好的去对页面进行布局,利用css进行布局是我们的下限,那么css上限在哪里呢?就是利用css来完成整个的html页面,纯css写一个静态页面,包含里面的一些icon图标,当然,在我们开发当中是不适用的,但一定会减少浏览器的一些请求,小伙伴们可以自行尝试,提升自己的css水平,那么接下来我们来了解一下不一样的css。

一、规则图形

1.介绍:

首先icon图标呢,需要很多不规则图形,进行拼凑,扭曲,旋转,圆角等等,那么我们先来介绍一下常用的不规则图形(这里我们来介绍一下常用的,但是不仅限于此,后面会进行补充)。

2.正方形与长方形(实心与空心)

2.1正方形:

设置其宽高相等,添加背景颜色,添加边框,如果不填加背景颜色,那么他就是一个空心的正方型,小伙伴们要注意了,当不添加背景颜色的时候他并不是白色,而是透明色。

这里的边框可以根据自己想要的宽度进行设置,如果小伙伴不清楚css属性,那么可以查看博主html的css博客来学习o~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: pink;
            border:1px solid #000;
        }
    </style>
</head>

<body>
    <!-- 正方形 -->
    <div class="square"></div>
</body>

</html>

效果图如下: 

2.2长方形

设置不一样的宽高,不就可以啦~这里小伙伴们可以自行测试 ,width是设置宽的属性,height是设置高的属性。

3.圆形与椭圆形(空心与实心)

3.1圆形与椭圆形

主要使用border-radius来进行设置,这个是css3中新增的属性。

那么我们直接上代码:

这里呢,我们在以上正方形代码当中添加了一个border-radius属性,值为50%,也就是将其设置为圆形,同样的border属性是用来添加边框的去除背景可以将其设置为一个空心的圆形,增加边框宽度可以得到一个圆环,小伙伴自行测试o~。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 1px solid #000;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- 正方形 -->
    <div class="square"></div>
</body>

</html>

结果展示:


  • 首先你可以减少百分比数值
  • 第二种,可以利用数值+px的形式来进行设置,通过测试来调整,得到你需要的结果。

思考:如果你想要得到如下示例该如何做?

接下来我们来分析一下思路(这里大家可以尝试一下)

  • 首先,我们需要得到一个长方形,可以设置宽200px高40px
  • 第二,当然是用到我们的border-radius属性了,那么参数是多少呢?大家可以尝试一下,常用参数是25px(并不适用于所有盒子,大家可以自行测试其他数值) 
  • 如果那你需要一个空心的,那么就将背景颜色去掉就可以了,同样的如果不需要边框去掉就可以了。

4.不同方向的三角形

 4.1原理

利用边框属性来实现,那么我们先来看一下以下盒子:

4.2边框属性 

那么,他是如何实现的呢?这里我们设置一个宽高,为100px的正方形,分别添加他的上下左右边框为3px以及不同的边框颜色,这里我们可以很清楚的看到他们分别是一个梯形,中间空心的部分是我们100×100pxd的空心盒子,代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border-top: 10px solid red;
            border-left: 10px solid rgb(255, 238, 48);
            border-right: 10px solid rgb(43, 255, 0);
            border-bottom: 10px solid rgb(0, 13, 255);

        }
    </style>
</head>

<body>
    <!-- 正方形 -->
    <div class="square"></div>
</body>

</html>

那么当我们不设置盒子宽高的时候会出现什么情况呢?我们接着往下看,这里我们将盒子的宽高设置为0,边框改为40px(边框太小我们会看不清楚,这里我们将边框宽度设置为40px),代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 0;
            height: 0;
            border-top: 40px solid red;
            border-left: 40px solid rgb(255, 238, 48);
            border-right: 40px solid rgb(43, 255, 0);
            border-bottom: 40px solid rgb(0, 13, 255);

        }
    </style>
</head>

<body>
    <!-- 正方形 -->
    <div class="square"></div>
</body>

</html>

运行结果


这时候我们可以看到,四边的边框就成了四个三角形,那我们需要向右的三角形,就可以将黄色部分提取出来,那么如何得到左边边框三角形呢?简单来说就是将上右下的边框干掉就可以啦,这里我们可以使用属性值transparent将其他边框透明掉(隐藏)就可以得到左边框的黄色三角形了。

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 0;
            height: 0;
            border-top: 40px solid transparent;
            border-left: 40px solid rgb(255, 238, 48);
            border-right: 40px solid transparent;
            border-bottom: 40px solid transparent;

        }
    </style>
</head>

<body>
    <!-- 正方形 -->
    <div class="square"></div>
</body>

</html>

那么我们来看一下效果:

左边是我们得到的黄色三角形,实际呢,我们的上右下三部分是隐藏掉了,也就是第二幅图中红色边框框选住的内容。那么同样的我们可以利用好transparent属性,来完成其他方向的三角形,大家可以自行尝试一下~

5.四分之一圆 

5.1原理:

  • 首先需要设置相同宽高得到一个正方形
  • 使用border_radius属性将正方型变为圆形
  • 只设置其中一个边框的圆角其他为0

5.2代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            /* 设置相同宽高得到正方形 */
            width: 100px;
            height: 100px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置上边框圆角为100px(与边框相同),其余设置为0,即可得到 */
            border-radius: 100px 0 0 0;
        }

        .square2 {
            /* 设置相同宽高得到正方形 */
            width: 100px;
            height: 100px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置上边框圆角为100px(与边框相同),其余设置为0,即可得到 */
            border-radius: 0 100px 0 0;
        }

        .square3 {
            /* 设置相同宽高得到正方形 */
            width: 100px;
            height: 100px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置上边框圆角为100px(与边框相同),其余设置为0,即可得到 */
            border-radius: 0 0 100px 0;
        }

        .square4 {
            /* 设置相同宽高得到正方形 */
            width: 100px;
            height: 100px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置上边框圆角为100px(与边框相同),其余设置为0,即可得到 */
            border-radius: 0 0 0 100px;


        }
    </style>
</head>

<body>
    <div class="square"></div>
    <br>
    <div class="square2"></div><br>
    <div class="square3"></div><br>
    <div class="square4"></div>
</body>

</html>

5.3结果展示

这里我们分别设置了,上右下左的边框圆角,得到的结果如下:

5.4四分之一空心圆 

四分之一空心圆与四分之一实心圆是相同的,只需要将背景属性去掉,然后改为border属性就可以了,通过border-width属性来设置不同的上右下左的边框,这一部分的内容,大家后续自己尝试一下,这里就不多说了。

6.二分之一圆

6.1原理:

  • 得到二分之一正方形
  • 利用圆角得到半圆

 6.2代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            /* 设置宽为高的一半(相当于得到半个正方形) */
            width: 100px;
            height: 50px;
            /* 设置背景颜色 */
            background-color: red;
            /* 设置上右的圆角与宽相同,其余为0,即可得到  */
            border-radius: 100px 100px 0 0;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

6.3运行结果

6.4二分之一空心圆:

原理与四分之一空心圆相同,我们将背景属性去掉,然后改为border属性就可以了,通过border-width属性来设置不同的边框,这一部分大家自行测试一下就可以了。

7.圆环

圆环内容相对比较简单,只需要将圆的border属性调大一些就可以得到一个圆环。

代码展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            /* 设置相同宽高 */
            width: 100px;
            height: 100px;
            /* 设置圆角,得到圆 */
            border-radius: 50%;
            /* 添加边框属性 */
            border: 20px solid red;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

结果展示: 

二、不规则图型

1.梯形

1.1原理

利用边框属性来制作一个梯形,同样的像上面的三角形一样,我们将四边形各个边框设置不同的颜色就可以得到一下图形,我们可以清楚的看到,实际每个边框加大边框宽度时,每个边框呈现梯形的样子,那么我们就可以利用,边框属性来得到一个梯形。

1.2不同颜色边框代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border-top: 45px yellow solid;
            border-left: 45px solid red;
            border-right: 45px solid green;
            border-bottom: 45px solid blue;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

 1.3梯形代码

我们将上边框以及左右边框都设置为透明色,就可以得到一个等腰梯形。同样的我们可以得到不同方向的等腰梯形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border-top: 45px transparent solid;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid blue;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

结果如下:

那么现在来思考一下如何得到一个直角梯形呢?我们接着来往下走...... 

2.直角梯形

2.1原理:

获得一个等腰梯形是将其余边框进行了隐藏,因为临近边框也设置了宽度,所以得到的梯形斜边是由相邻边框进行挤压得到的,那么我们可以将等腰梯形的相邻一边的边框宽度设置为0就可以得到啦,那为什么不将两边都设置为0呢?如果边都设置为0那我们就会得到一个矩形啦~为了更好的理解其中的原理,大家可以尝试一下哦~

那么接下来我我们来看直角梯形的代码

2.2代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            border-top: 45px transparent;
            border-left: 0px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid blue;
        }
    </style>
</head>

<body>
    <div class="square"></div>
</body>

</html>

2.3运行结果如下所示:

注:这里设置了左边框为0,得到直角梯形,也可以设置有边框哦~

3.五边形

3.1原理

将正方形与三角形结合得到五边形,上面我们已经够讲到了正方形与三角形大家忘记的话可以再看一下哦。

3.2 代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-bottom: pink solid 50px;
            border-left: transparent solid 50px;
            border-right: transparent solid 50px;
            border-top: transparent solid 50px;

        }

        .square {
            width: 100px;
            height: 60px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="triangle"></div>
        <div class="square"></div>
    </div>

</body>

</html>

3.3 运行结果展示

4.六边形 

4.1原理

利用两个等腰梯形得到一个六边形,通过两个等腰梯形的拼接,定位来实现六边形。

4.2代码示例

这里是使用了一个上边框制作的梯形,以及一个下边框制作的梯形,将两个梯形进行组合拼接,得到以恶搞六边形的形状。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
        }

        .square {
            width: 90px;
            height: 90px;
            border-top: 45px transparent;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid blue;
        }

        .square2 {
            width: 90px;
            height: 90px;
            border-top: 45px solid blue;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 45px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="square"></div>
        <div class="square2"></div>
    </div>

</body>

</html>

4.3 结果展示

5.六角形

5.1原理

利用两个三角形,进行旋转得到一个六角形

5.2代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 设置定位 */
            position: relative;
        }

        .square {

            width: 0;
            height: 0;
            /* 将其他边框隐藏得到向下三角形 */
            border-top: 45px solid red;
            border-bottom: 45px solid transparent;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
            /* 设置定位父相子绝 */
            position: absolute;
            /* 移动合适的位置 相对于父级的位置*/
            top: 57.5px;
        }

        .square2 {
            width: 0;
            height: 0;
            /* 将其他边框隐藏得到向上三角形 */
            border-top: 45px solid transparent;
            border-bottom: 45px solid red;
            border-left: 45px solid transparent;
            border-right: 45px solid transparent;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="square"></div>
        <div class="square2"></div>
    </div>

</body>

</html>

5.3结果展示

6.八角形

6.1原理

利用两个正方形得到一个八角形,通过旋转定位的属性来设置具体的位置

6.2代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 设置定位 */
            position: relative;
            margin: 20px;
            /*此处不用注意,只是将盒子移动到合适的位置*/
        }

        .square {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置定位 */
            /* 相对于父级的位置 */
            position: absolute;
            /* 旋转角度 */
            transform: rotate(45deg);

        }

        .square2 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="square"></div>
        <div class="square2"></div>
    </div>

</body>

</html>

6.3结果展示

7.十二角形

7.1原理

有了上面的代码,下伙伴可以思考一下十二角星如何实现。

那么就是三个正方型进行旋转定位来实现的,那么我们先来看一下具体代码吧。

7.2代码实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 设置定位 */
            position: relative;
            margin: 20px;
            /*此处不用注意,只是将盒子移动到合适的位置*/
        }

        .square {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置定位 */
            /* 相对于父级的位置 */
            position: absolute;
            /* 旋转角度 */
            transform: rotate(30deg);

        }

        .square2 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 设置定位 */
            /* 相对于父级的位置 */
            position: absolute;
            /* 旋转角度 */
            transform: rotate(60deg);
        }

        .square3 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="square"></div>
        <div class="square2"></div>
        <div class="square3"></div>
    </div>

</body>

</html>

7.3结果示例:

三、结束语

那么本节不一样的css,就到此结束啦,下一节我们就可以开始做一些icon图标啦。那么作业来啦,如何利用本节知识来做以下效果呢?小伙伴们可以尝试以下哦~可以自己添加一些其他元素来丰富画面,ok,那么本节内容就到此结束了,下一节我们来看具体代码实现操作,以及其他的图标渲染。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237862.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HPM6750EVK2开发板程序烧录测试

对于HPM6750EVK2开发板&#xff0c;官方板子上没有板载调试器&#xff0c;从淘宝上购买了一个&#xff0c;据说配套的调试器&#xff0c;进行测试&#xff0c;仅此进行记录。 开发板HPM6750EVK2 openocd调试器图片 openocd调试器&#xff0c;淘宝链接 http://e.tb.cn/h.TZH7b…

斐波那契数的第n个数代码分享(c基础)

1&#xff1a;迭代 //斐波那契数的第n个数 #include<stdio.h> //unsigned long long Fib(n) //{ // // if (1 n || 2 n) // return 1; // else return Fib((n - 1) Fib((n - 2); // // //} unsigned long long Fib(n) {if (n 1 || n 2)return 1;else{int j 3;u…

测试实项中的偶必现难测bug--一键登录失败

问题描述:安卓和ios有出现部分一键登录失败的场景,由于场景比较极端,衍生了很多不好评估的情况。 产生原因分析: 目前有解决过多次这种行为的问题,每次的产生原因都有所不同,这边根据我个人测试和收集复现的情况列举一些我碰到的: 1、由于我们调用的是友盟的一键登录的…

私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用

摘要&#xff1a;本文剖析了私域流量圈层在新消费时代呈现出的独特温度与信任优势&#xff0c;阐述了从传统销售到新消费转型中用户心理的变化。同时&#xff0c;强调了内容对于私域流量的关键作用&#xff0c;并分析开源 AI 智能名片、2 1 链动模式、S2B2C 商城小程序在私域流…

WPF之iconfont(字体图标)使用

1&#xff0c;前文&#xff1a; WPF的Xaml是与前端的Html有着高度相似性的标记语言&#xff0c;所以Xaml也可同Html一般轻松使用阿里提供的海量字体图标&#xff0c;从而有效的减少开发工作度。 2&#xff0c;下载字体图标&#xff1a; 登录阿里图标库网iconfont-阿里巴巴矢量…

[Meachines] [Medium] MonitorsThree SQLI+Cacti-CMS-RCE+Duplicati权限提升

信息收集 IP AddressOpening Ports10.10.11.30TCP:22&#xff0c;80 $ nmap -p- 10.10.11.30 --min-rate 1000 -sC -sV -Pn PORT STATE SERVICE VERSION 22/tcp open ssh OpenSSH 8.9p1 Ubuntu 3ubuntu0.10 (Ubuntu Linux; protocol 2.0) | …

AndroidStudio-文本显示

一、设置文本的内容 1.方式&#xff1a; &#xff08;1&#xff09;在XML文件中通过属性&#xff1a;android:text设置文本 例如&#xff1a; <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.andr…

pyspark入门基础详细讲解

1.前言介绍 学习目标&#xff1a;了解什么是Speak、PySpark&#xff0c;了解为什么学习PySpark&#xff0c;了解课程是如何和大数据开发方向进行衔接 使用pyspark库所写出来的代码&#xff0c;既可以在电脑上简单运行&#xff0c;进行数据分析处理&#xff0c;又可以把代码无缝…

uniapp上拉刷新下拉加载

方法一&#xff1a; z-paging 的组件库&#xff1a; show-loading-more-no-more-view"false" 该属性控制是否显示 "加载更多" 或 "没有更多" 的提示。如果设为 false&#xff0c;则不会显示这些提示。如果设为 true&#xff0c;当数据加载完毕…

CSS教程(二)- CSS选择器

1. 作用 匹配文档中的某些元素为其应用样式。根据不同需求把不同的标签选出来。 2. 分类 分类 基础选择器 包含 标签选择器、ID选择器、类选择器、通用选择器等 复合选择器 包含 后代选择器、子代选择器、伪类选择器等 1 标签选择器 介绍 又称为元素选择器&#xff0c;根…

LeetCode 56.合并区间

思路&#xff1a; 类似于用最少的箭射气球题目&#xff0c;最主要是要处理区间之间是否有重叠&#xff0c;如果无重叠则加入数组&#xff0c;如果有重叠&#xff0c;则需要重新设判断的边界&#xff0c;与下一个区间继续判断。 难点在于 代码用法 需熟练掌握 思想简单&#…

【MySQL】MySQL基础知识复习(上)

前言 本篇博客将复习MySQL的基础知识&#xff0c;及着重复习CRUD&#xff08;增删查改&#xff09;操作。 目录 一.MySQL数据库基础知识 1.数据库操作 1.1显示当前的数据库 1.2 创建数据库 1.3 使用数据库 1.4 删除数据库 2.数据类型 2.1.数字类型 2.2字符串类型 2.3…

华为大变革?仓颉编程语言会代替ArkTS吗?

在华为鸿蒙生态系统中&#xff0c;编程语言的选择一直是开发者关注的焦点。近期&#xff0c;华为推出了自研的通用编程语言——仓颉编程语言&#xff0c;这引发了关于仓颉是否会取代ArkTS的讨论。本文将从多个角度分析这两种语言的特点、应用场景及未来趋势&#xff0c;探讨仓颉…

稀硫酸介质中 V 型球阀的材质选择与选型要点-耀圣

稀硫酸介质中 V 型球阀的材质选择与选型要点 在工业生产中&#xff0c;稀硫酸是一种常见的化学介质&#xff0c;对于输送和控制稀硫酸的阀门&#xff0c;正确的材质选择和选型至关重要。本文将介绍稀硫酸介质中 V 型球阀的材质选择&#xff0c;并提供一些选型的要点。 一、稀硫…

昇思大模型平台打卡体验活动:项目3基于MindSpore的GPT2文本摘要

昇思大模型平台打卡体验活动&#xff1a;项目3基于MindSpore的GPT2文本摘要 1. 环境设置 本项目可以沿用前两个项目的相关环境设置。首先&#xff0c;登陆昇思大模型平台&#xff0c;并进入对应的开发环境&#xff1a; https://xihe.mindspore.cn/my/clouddev 接着&#xff0…

定时器输入捕获实验配置

首先&#xff0c;第一个时基工作参数配置 HAL_TIM_IC_Init( ) 还是一样的套路&#xff0c;传参是一个句柄&#xff0c;先定义一个结构体 Instance&#xff1a;指向TIM_TypeDef的指针&#xff0c;表示定时器的实例。TIM_TypeDef是一个包含了定时器寄存器的结构体&#xff0c;用…

计算机视觉读书系列(1)——基本知识与深度学习基础

研三即将毕业&#xff0c;后续的工作可能会偏AI方向的计算机视觉方面&#xff0c;因此准备了两条线来巩固计算机视觉基础。 一个是本系列&#xff0c;阅读经典《Deep Learning for Vision System》&#xff0c;做一些总结跑一些例子&#xff0c;也对应本系列文章 二是OpenCV实…

运维智能化转型:AIOps引领IT运维新浪潮

1. AIOps是什么&#xff1f; AIOps&#xff08;Artificial Intelligence for IT Operations&#xff09;&#xff0c;即人工智能在IT运维中的应用&#xff0c;通过机器学习技术处理运维数据&#xff08;如日志、监控信息和应用数据&#xff09;&#xff0c;解决传统自动化运维…

SkyNet嵌入式系统目标检测实践测试分析

目标检测和跟踪对于资源受限的嵌入式系统来说是具有挑战性的任务。尽管这些任务是人工智能领域中计算量最大的任务之一&#xff0c;但它们在嵌入式设备上只能使用有限的计算和内存资源。与此同时&#xff0c;这种资源受限的实现通常需要满足额外的苛刻要求&#xff0c;如实时响…

「OC」SDWebimage的学习

「OC」SDWebimage的学习 前言 在知乎日报这个项目之中&#xff0c;我在很多情况下都会进行图片资源的网络申请。通过上网搜索我了解到了SDWebimage这个功能丰富的第三方库&#xff0c;进行了较为浅层的学习。因为SDWebimage这个库之中的相关内容还是较为多且复杂的&#xff0…