前端技术(七)——less 教程

一、less简介

1. less是什么？

less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS 更易维护和扩展LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。

less的中文官网:https://lesscss.cn/

2. less编译工具

koala 官网 http://koala-app.com/

3. less中的嵌套规则

1.基本嵌套规则

⑴ css中的标签嵌套的写法

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            position: relative;
            width: 300px;
            height: 400px;
            border: 1px solid;
            margin: 0 auto;
        }
        #wrap .inner{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: pink;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner">

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

在这里插入图片描述

⑵ less中嵌套标签中样式设置的写法

在这里插入图片描述

<!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 type="text/less">
        *{
            margin: 0;
            padding: 0;
        }
        #wrap{
            position: relative;
            width: 300px;
            height: 400px;
            border: 1px solid;
            margin: 0 auto;
            .inner{
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                background-color: pink;
                height: 100px;
                width: 100px;
            }
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

样式如下：

在这里插入图片描述

4. 使用koala将less文件编译成css文件

⑴ 先将之前的less样式拆分到css文件夹中的test.less文件中

拆分前的：
在这里插入图片描述
拆分后的
在这里插入图片描述

test.less

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;
    }
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/less" href="css/test.less"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

结果为：
在这里插入图片描述

⑵ 通过koala将.less文件编译成.css文件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将.less编译后生成的.css文件引入的html文件中
在这里插入图片描述

test.css文件

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

结果如下：
在这里插入图片描述

5. less中的注释

以 // 开头的注释，不会被编译到css文件中
以 /**/包裹的注释会被编译到css文件中

6. less中的变量

使用@来声明一个变量：@pink:pink;
1.作为普通属性值来使用: @pink
2.作为选择器和属性名来使用: @{selector的值}
3.作为URL： @{url}

.less不使用变量和.less使用变量对比
在这里插入图片描述
编译前的.less文件和编译后生成的.css文件对比
在这里插入图片描述

编译前的.less

/*多行注释*/
//单行注释
@color:pink;//作为普通值来使用
@m:margin;//作为属性名来使用
@selector:#wrap;//作为选择器

*{
    @{m}: 0;
    padding: 0;
}
@{selector}{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @color;
        height: 100px;
        width: 100px;
    }
}

.less编译后生成的.css文件

/*多行注释*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffc0cb;
  height: 100px;
  width: 100px;
}

在这里插入图片描述

7. 变量的延迟加载和&的使用

⑴ 变量的延迟加载

在这里插入图片描述

⑵ &的使用

在这里插入图片描述

在这里插入图片描述
编译前的.less

*{
    margin: 0;
    padding: 0;
}
#wrap{
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;
        //&符号主要用于引用父选择器，及 #wrap .inner 
        &:hover{
            background-color: darkblue;
        }
    }
}

.less编译后生成的.css文件

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner:hover {
  background-color: darkblue;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

效果如下：
在这里插入图片描述

二、less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

不用混合时候less的写法
在这里插入图片描述
编译生成.css文件
在这里插入图片描述
test.less文件

#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;
    }
    .inner2 {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;
    }
}

test.css文件

#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

1. 普通混合和不带输出的混合改造

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong{
    position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: pink;
        height: 100px;
        width: 100px;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        .juzhong;
    }
    .inner2 {
        .juzhong;
    }
}

test.css文件

.juzhong {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: pink;
  height: 100px;
  width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

2. 带参的混合

在这里插入图片描述
由图可以看出来，通过带参混合的方式给css设置不同的样式。大大简化了代码。
在这里插入图片描述
test.less文件

.juzhong(@w,@h,@c){
    position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @c;
        height: @h;
        width: @w;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        .juzhong(100px,100px,yellow);
    }
    .inner2 {
        .juzhong(50px,50px,green);
    }
}

test.css文件

#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffff00;
  height: 100px;
  width: 100px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #008000;
  height: 50px;
  width: 50px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

3. 带参数并且有默认值的混合

在这里插入图片描述
在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){
    position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @c;
        height: @h;
        width: @w;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        .juzhong();
    }
    .inner2 {
        .juzhong();
    }
}

test.css文件

#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffff00;
  height: 100;
  width: 200;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffff00;
  height: 100;
  width: 200;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

4. 命名参数

使用带参并且有默认值的混合的时候，想给部分参数设置，这时候可以使用名称参数来区分是给哪个参数设值的。
在这里插入图片描述

在这里插入图片描述
test.less文件

.juzhong(@w:200,@h:100,@c:yellow){
    position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: @c;
        height: @h;
        width: @w;
}
#wrap {
    position: relative;
    width: 300px;
    height: 400px;
    border: 1px solid;
    margin: 0 auto;
    .inner {
        .juzhong(@c:yellow);
    }
    .inner2 {
        .juzhong(@w:100px,@c:blue);
    }
}

test.css文件

#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffff00;
  height: 100;
  width: 200;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #0000ff;
  height: 100;
  width: 100px;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
        <div class="inner2">

        </div>
    </div>
</body>
<script src="/less/less.min.js" type="text/javascript"></script>
</html>

在这里插入图片描述

5.匹配模式

传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则
在这里插入图片描述
编译后的

在这里插入图片描述
sjx.less文件

.sjx(@_){
    width: 0px;
    height: 0px;
    overflow: hidden;
}



.sjx(T,@w,@c){
    border-width:@w;
    border-color: transparent  transparent  @c transparent ;
    border-style:dashed dashed solid dashed  ;
}

.sjx(B,@w,@c){
    border-width:@w;
    border-color: @c transparent  transparent   transparent ;
    border-style:solid dashed dashed  dashed  ;
}

.sjx(L,@w,@c){
    border-width:@w;
    border-color:  transparent @c  transparent   transparent ;
    border-style: dashed solid dashed  dashed  ;
}

.sjx(R,@w,@c){
    border-width:@w;
    border-color:  transparent   transparent   transparent @c;
    border-style: dashed  dashed  dashed  solid;
}

test.less文件

@import "./sjx.less";
#wrap{
    .sjx(B,100px,red);
}

test.css文件

#wrap {
  border-width: 100px;
  border-color: #ff0000 transparent transparent transparent;
  border-style: solid dashed dashed  dashed  ;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="sjx"></div>
    </div>
</body>
</html>

在这里插入图片描述

6. arguments变量

什么是@arguments 变量：@arguments 代表所有的可变参数

注意：

@arguments 代表所有可变参数，参数的先后顺序就是()括号内的参数的顺序
赋值时，值的位置和个数是一 一对应的。只有一个值时，把值赋值给第一个；有两个值时，把值赋值给第一个和第二个……以此类推；需要注意的是如果想给第一个和第三个赋值，不能写(值
1，值 3)，必须把原来的默认值写上去

在这里插入图片描述
在这里插入图片描述

test.less文件

.border(@w,@style,@c){
    border: @arguments;
}
#wrap .sjx{
    .border(1px,solid,red);
}

test.css文件

#wrap .sjx {
  border: 1px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="sjx"></div>
    </div>
</body>
</html>

在这里插入图片描述

三、less运算

‌Less支持算术运算，包括加法(+)、减法(-)、乘法(*)和除法(/)，这些运算可以对任何数字、颜色或变量进行操作。‌ Less中的运算功能提供了灵活性，使得开发者能够更方便地处理样式计算，尤其是在需要动态调整样式属性时。这些运算不仅限于数值计算，还包括颜色和单位之间的计算，尽管在某些情况下，单位换算可能不会发生，或者换算结果可能被忽略（例如，从px到cm的转换）
在这里插入图片描述
在这里插入图片描述
test.less文件

.border(@w,@style,@c){
    border: @arguments;
}
#wrap .sjx{
    .border(1+100px,solid,red);
}

test.css文件

#wrap .sjx {
  border: 101px solid #ff0000;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="sjx"></div>
    </div>
</body>
</html>

在这里插入图片描述

四、less继承

1. 用less混合模式

样式

在这里插入图片描述
juzhong.less文件

.juzhong(@w,@h,@c){
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: @w;
    height: @h;
    background-color: @c;
}

test.less文件

*{
    margin: 0px;
    padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:nth-child(1){
            .juzhong(100px,100px,pink);
        }
        &:nth-child(2){
            .juzhong(50px,50px,deeppink)
        }
    }
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner">
            inner1
        </div>
        <div class="inner">
            inner2
        </div>
    </div>
</body>
</html>

test.css文件

* {
  margin: 0px;
  padding: 0px;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: #ffc0cb;
}
#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: #ff1493;
}

2. 用less继承模式

样式：

在这里插入图片描述
juzhong.less文件

.juzhong{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.juzhong:hover{
    background-color: deepskyblue!important;
}

juzhong.css文件

.juzhong {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover {
  background-color: deepskyblue!important;
}

test.less文件

*{
    margin: 0px;
    padding: 0px;
}
@import "mixin/juzhong.less";
#wrap{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: 0 auto;
    .inner{
        &:extend(.juzhong);
        &:nth-child(1){
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        &:nth-child(2){
            width: 50px;
            height: 50px;
            background-color: deeppink;
        }
    }
}

test.css文件

* {
  margin: 0px;
  padding: 0px;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.juzhong:hover {
  background-color: deepskyblue!important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: pink;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: deeppink;
}

test.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
    <div id="wrap">
        <div class="inner juzhong">
            inner1
        </div>
        <div class="inner">
            inner2
        </div>
    </div>
</body>
</html>

案例分析
在这里插入图片描述

五、 less避免编译

避免编译的格式：

*{
    margin: 10*10px;
    padding: ~"cacal(10*10px)";
}

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Redis】Redis 典型应用 - 缓存 (Cache) 原理与策略

【Redis】Redis 典型应用 - 缓存 (Cache) 原理与策略

目录 Redis 典型应⽤ - 缓存 (cache)什么是缓存使⽤ Redis 作为缓存缓存的更新策略1)定期⽣成2)实时生成 缓存预热&#xff0c;缓存穿透&#xff0c;缓存雪崩 和 缓存击穿关于缓存预热 (Cache preheating)什么是缓存预热 关于缓存穿透 (Cache penetration)什么是缓存穿透为何产…
阅读更多...
Maven从入门到精通（二）

Maven从入门到精通（二）

一、什么是pom.xml pom.xml是Maven项目的核心配置文件&#xff0c;它是 项目对象模型 - Project Object Model&#xff08;POM&#xff09;的缩写。POM定义了项目的所有属性&#xff0c;包括项目的名称、版本、依赖关系、构建配置等。使用pom.xml&#xff0c;我们可以轻松地管…
阅读更多...
区间和的个数

区间和的个数

题目链接 区间和的个数 题目描述 注意点 求数组中&#xff0c;值位于范围 [lower, upper] &#xff08;包含 lower 和 upper&#xff09;之内的 区间和的个数-2^31 < nums[i] < 2^31 - 1-10^5 < lower < upper < 10^5 解答思路 参照题解使用归并排序解决本…
阅读更多...
游戏开发引擎___unity位置信息和unlit shader（无光照着色器）的使用，以桌子的渲染为例

游戏开发引擎___unity位置信息和unlit shader（无光照着色器）的使用，以桌子的渲染为例

unity是左手坐标系 1.位置信息 1.1 代码 using System.Collections; using System.Collections.Generic; using UnityEngine;public class positionTest : MonoBehaviour {public Camera Camera;private void OnGUI(){//世界坐标系&#xff0c;GUI里的标签GUI.Label(new Rec…
阅读更多...
Linux 挂载磁盘与开机自动挂载操作指南

Linux 挂载磁盘与开机自动挂载操作指南

Linux 挂载磁盘与开机自动挂载操作指南 文章目录 Linux 挂载磁盘与开机自动挂载操作指南一 挂载磁盘1 查看硬盘信息2 新增数据盘执行分区3 新建分区4 创建一个主分区5 分区编号6 初始磁柱编号7 截止磁柱编号8 查看新建分区信息9 分区结果写入10 新分区同步操作系统11 设置新分区…
阅读更多...
9.12 TFTP通信

9.12 TFTP通信

客户端设计&#xff08;仅供参考&#xff09;&#xff1a; 下载本质&#xff1a;读取服务器发送的数据包&#xff0c;写入到本地文件 上传本质&#xff1a;读取本地文件内容&#xff0c;发送给服务器。 1、建立菜单选项&#xff0c;上传和下载。 2、上传功能函数&#xff1a; …
阅读更多...
【程序分享】Warren Cowley Parameters 程序：表征短程有序的化学基序

【程序分享】Warren Cowley Parameters 程序：表征短程有序的化学基序

分享一个 Warren Cowley Parameters 程序&#xff1a;表征短程有序的化学基序。 感谢论文的原作者&#xff01; 主要内容 “晶体材料的化学成分具有原子尺度的波动&#xff0c;可调节各种中尺度特性。建立此类材料的化学-微结构关系需要对这些化学波动进行适当的表征。然而&…
阅读更多...
2024网安周今日开幕，亚信安全亮相30城

2024网安周今日开幕，亚信安全亮相30城

2024年国家网络安全宣传周今天在广州拉开帷幕。今年网安周继续以“网络安全为人民&#xff0c;网络安全靠人民”为主题。2024年国家网络安全宣传周涵盖了1场开幕式、1场高峰论坛、5个重要活动、15场分论坛/座谈会/闭门会、6个主题日活动和网络安全“六进”活动。亚信安全出席20…
阅读更多...
yolov8-obb中存在的一个bug

yolov8-obb中存在的一个bug

yolov8支持OBB目标检测，且能提供较好的性能。 但是最近在使用yolov8-obb的过程中，发现yolov8-obb存在一个bug。即训练数据如果包含不带旋转角度的水平目标时，训练出的模型，经常会输出垂直的检测框，需要旋转90度以后才能得到最终结果。把yolov8-obb相关的源码阅读一遍才发…
阅读更多...
【数学建模】2024数学建模国赛经验分享

【数学建模】2024数学建模国赛经验分享

文章目录 一、关于我二、我的数模历程三、经验总结&#xff1a; 一、关于我 我的CSDN主页&#xff1a;https://gxdxyl.blog.csdn.net/ 2020年7月&#xff08;大二结束的暑假&#xff09;开始在CSDN写作&#xff1a; 阿里云博客专家&#xff1a; 接触的领域挺多的&#xff…
阅读更多...
HTML 转 PDF API 接口

HTML 转 PDF API 接口

HTML 转 PDF API 接口 网络工具 / 文件处理 支持网页转 PDF 高效生成 PDF / 提供永久链接。 1. 产品功能 超高性能转换效率&#xff1b;支持将传递的 HTML 转换为 PDF&#xff0c;支持转换 HTML 中的 CSS 格式&#xff1b;支持传递网站 URL&#xff0c;直接转换页面成对应的 …
阅读更多...
Java实现生成验证码实战

Java实现生成验证码实战

文章目录 需求描述思想思路实现代码实现效果 在实际项目中&#xff0c;管理端的登录&#xff0c;会涉及验证码的校验&#xff0c;简单的数字与字母组合形式&#xff0c;在Java中要如何生成与实现&#xff0c;记录下来&#xff0c;方便备查。 需求描述 生成8位的由数字、大写字…
阅读更多...
【零基础学习CAPL】——CRC值监控测试

【零基础学习CAPL】——CRC值监控测试

🙋‍♂️【零基础学习CAPL】系列💁‍♂️点击跳转 ——————————————————————————————————–—— 从0开始学习CANoe使用 从0开始学习车载车身 相信时间的力量 星光不负赶路者，时光不负有心人。 目录 1.概述2.需求介绍3.算法4.逻辑判断5.测…
阅读更多...
ARCGIS PRO DSK MapTool

ARCGIS PRO DSK MapTool

MapTool用于自定义地图操作工具&#xff0c;使用户能够在ArcGIS Pro中执行特定的地图交互操作。添加 打开MapTool1.vb文件&#xff0c;可以看到系统已经放出MapTool1类&#xff1a; Public Sub New()将 IsSketchTool 设置为 true 以使此属性生效IsSketchTool TrueSketchTyp…
阅读更多...
为了准确计算延迟退休时间，我做了一个退休年龄计算器

为了准确计算延迟退休时间，我做了一个退休年龄计算器

延迟退休计算方法 原本退休分为三种情况&#xff0c;男性&#xff0c;女工人&#xff0c;女干部 男性&#xff1a;退休年龄为60岁。女干部&#xff1a;退休年龄为55岁。女工人&#xff1a;退休年龄为50岁。 现在延迟以后&#xff08;根据2024年9月13日公布的规则&#xff09…
阅读更多...
一次开发，多端部署--实例二

一次开发，多端部署--实例二

一、视觉风格 1、分层参数 使用了分层参数后&#xff0c;当系统切换深色模式时&#xff0c;字体和背景也可以自适应。 Row() {Column() {Text(分层参数)// 分层参数在sysResource包&#xff0c;属于系统参数&#xff0c;全局可用.fontColor($r(sys_color.ohos_id_color_text_pr…
阅读更多...
JavaScript模块化——ES6模块化规范

JavaScript模块化——ES6模块化规范

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 使用环境&#xff1a;vscode Chrome浏览器 1.ES6 1.1ES6介绍 ES6的全称是ECMAScript 6&#xff0c;也称为ES2015&#xff0c;是JavaScript的一个重要版本&#xff0c;它引入了许多新特性和改进&#xf…
阅读更多...
云计算实训43——部署k8s基础环境、配置内核模块、基本组件安装

云计算实训43——部署k8s基础环境、配置内核模块、基本组件安装

一、前期系统环境准备 1、关闭防火墙与selinux [rootk8s-master ~]# systemctl stop firewalld[rootk8s-master ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.service. Removed symlink /etc/systemd/system/dbus…
阅读更多...
云渲染与AI渲染分别是什么？两者的优势对比

云渲染与AI渲染分别是什么？两者的优势对比

云渲染和AI渲染是两种先进的渲染技术&#xff0c;它们各自具有独特的优势和应用场景。下面针对两种情况来简单说明下。 1、云渲染&#xff1a; - 定义&#xff1a;云渲染是一种利用远程服务器(云端)来处理和生成渲染效果的技术。它允许用户将计算密集型的任务转移到云端&#…
阅读更多...
uniapp网络延迟优化之骨架屏

uniapp网络延迟优化之骨架屏

文章目录 前言uniapp网络延迟优化之骨架屏 一、骨架屏是什么&#xff1f;二、使用步骤1.在微信开发者工具生成骨架屏文件2.转成vue组件3.组件中使用4.效果展示4.开发时遇到的问题&#xff1f; 总结 前言 uniapp网络延迟优化之骨架屏 一、骨架屏是什么&#xff1f; 骨架屏的主…
阅读更多...
最新文章

Copyright @ 2022~2023