前端技术(七)——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.rhkb.cn/news/423190.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32CubeMx学习笔记——GPIO使用

STM32CubeMx学习笔记——GPIO使用

一、新建工程 1、选择芯片型号 2、配置时钟RCC 选择 HSE(外部高速时钟) 为 Crystal/Ceramic Resonator(晶振/陶瓷谐振器) ​ 3、时钟树配置 在clock Configuration中将HCLK配置为最高频率然后回车 ​ 4、选择调试模式 SYS 设置&#xff0c;选择 Debug 为 Serial Wire …
阅读更多...
Qt qrc机制

Qt qrc机制

文章目录 0. 前言1. qrc机制2. qrc使用 0. 前言 要设置窗口图标&#xff0c;就需要有图片及其图片所在路径&#xff0c;在本机上可能没什么问题&#xff0c;但是换了一个机器&#xff0c;路径可能不一致或者图片丢失&#xff0c;这就导致图片显示不出来。 Qt引入qrc机制&…
阅读更多...
【零基础学习CAPL】——CRC值监控测试

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

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

swift qwen2-vl推理及加载lora使用案例

参考： https://swift.readthedocs.io/zh-cn/latest/Instruction/LLM%E5%BE%AE%E8%B0%83%E6%96%87%E6%A1%A3.html#%E5%BE%AE%E8%B0%83%E5%90%8E%E6%A8%A1%E5%9E%8B https://blog.csdn.net/weixin_42357472/article/details/142150209 SWIFT支持300+ LLM和50+ MLLM（多模态大模型…
阅读更多...
《程序猿之设计模式实战 · 装饰者模式》

《程序猿之设计模式实战 · 装饰者模式》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
欢迎来到我的Java世界“抽象类”

欢迎来到我的Java世界“抽象类”

前言 在上篇中我们学习到了继承的概念、语法等等&#xff0c;那么小编将来为大家方享下一篇Java中的抽象类。 1.抽象类的概念 2.抽象类的语法 3.抽象类的特性 4.抽象类的作用 一&#xff1a;讲到抽象类&#xff0c;大家是不是会很迷惑什么是抽象类&#xff1f; 在面向对象…
阅读更多...
安卓framework美化手势导航侧滑返回UI

安卓framework美化手势导航侧滑返回UI

文章目录 手势导航的侧滑返回效果图原生效果如下:要实现的功能,: 实现代码1. 初始化代码2. 修改绘制的代码,进行箭头与退出UI的显示3. 拖动的时候手指上下移动时,箭头ui跟着移动 以下是一些其他可以美化安卓右滑手势拖动 UI 的方法&#xff1a;视觉效果方面形状和布局方面 安卓…
阅读更多...
加密软件有哪些数据防护功能？

加密软件有哪些数据防护功能？

1.文件透明加密&#xff1a;采用透明加密技术&#xff0c;自动对指定类型的敏感文件进行实时加密&#xff0c;确保数据在存储和传输过程中的安全性。 2.权限管理与访问控制&#xff1a;通过细粒度的权限管理&#xff0c;控制员工对敏感数据的访问权限&#xff0c;包括读取、修…
阅读更多...
PHP一键约课高效健身智能健身管理系统小程序源码

PHP一键约课高效健身智能健身管理系统小程序源码

一键约课&#xff0c;高效健身 —— 智能健身管理系统让健康触手可及 &#x1f3cb;️‍♀️ 告别繁琐&#xff0c;一键开启健身之旅 你还在为每次去健身房前的繁琐预约流程而烦恼吗&#xff1f;现在有了“一键约课高效健身智能健身管理系统”&#xff0c;所有问题都迎刃而解…
阅读更多...
Solana核心漏洞技术详解

Solana核心漏洞技术详解

8月9日&#xff0c;Solana团队齐心协力解决了一个严重的安全漏洞。这次秘密修复详情可以在GitHub上查询到。CertiK团队对这一漏洞进行了深入分析。 1. Solana漏洞起因 8月9日&#xff0c;Solana验证者和客户端团队齐心协力解决了一个严重的安全漏洞。Solana验证者Laine表示&am…
阅读更多...
TypeScript 扩展

TypeScript 扩展

扩展 ?:可选参数 可选链事实上并不是TypeScript独有的特性&#xff0c;它是ES11&#xff08;ES2020&#xff09;中增加的特性 可选链使用可选链操作符 ? 作用是当对象的属性不存在时&#xff0c;会短路&#xff0c;直接返回undefined&#xff0c;如果存在&#xff0c;那么…
阅读更多...
【机器学习】从零开始理解深度学习——揭开神经网络的神秘面纱

【机器学习】从零开始理解深度学习——揭开神经网络的神秘面纱

1. 引言 随着技术的飞速发展，人工智能（AI）已从学术研究的实验室走向现实应用的舞台，成为推动现代社会变革的核心动力之一。而在这一进程中，深度学习（Deep Learning）因其在大规模数据处理和复杂问题求解中的卓越表现，迅速崛起为人工智能的最前沿技术。深度学习的核心是…
阅读更多...
安卓玩机工具-----ADB方式的刷机玩机工具“秋之盒”’ 测试各项功能预览

安卓玩机工具-----ADB方式的刷机玩机工具“秋之盒”’ 测试各项功能预览

秋之盒 安卓玩机工具-秋之盒是一款ADB刷机工具箱&#xff0c;基于谷歌ADB的一款绿色安装&#xff0c;具备了海量扩展模块,支持ADB刷机救砖、一键激活黑域、adb指令修复等功能&#xff0c;是一款开源、免费、易用的手机刷机工具&#xff01; 并且是一款开源、免费、易用的图形化…
阅读更多...
细致刨析JDBC ① 基础篇

细致刨析JDBC ① 基础篇

目录 一、JDBC概述 1.JDBC的概念 ​编辑2.JDBC的核心组成 ① 接口规范: ② 实现规范: 二、JDBC快速入门 1.JDBC搭建步骤 三、核心API理解 1.注册驱动 2.Connection 3.Statement 4.PreparedStatement 5.ResultSet 四、基于Preparedment实现CRUD 1.查询单行单列 2.查询单行…
阅读更多...
P3565 [POI2014] HOT-Hotels

P3565 [POI2014] HOT-Hotels

~~~~~ P3565 [POI2014] HOT-Hotels ~~~~~ 总题单链接 ~~~~~ 2024.9.10&#xff1a;DP方程有问题&#xff0c;已修改&#xff0c;同时更新了长链剖分优化版本。 思路 ~~~~~ 设 g [ u ] [ i ] g[u][i] g[u][i] 表示在 u u u 的子树内&#xff0c;距离 u u u 为 i i i 的点的…
阅读更多...
管家婆云辉煌手机端怎么连接蓝牙打印机？

管家婆云辉煌手机端怎么连接蓝牙打印机？

管家婆云辉煌手机端可以连接蓝牙打印机&#xff0c;这样手机可以发送打印任务到蓝牙打印机&#xff0c;完成打印任务。具体的设置步骤如下&#xff1a; 一、首先完成手机和蓝牙打印机配对&#xff0c;打开蓝牙打印机后。手机开启蓝牙和定位服务 点击手机设置&#xff0c;进入手…
阅读更多...
jmeter压力测试，通过LLM利用RAG实现知识库问答，NEO4J部署，GraphRAG以知识图谱在查询时增强提示实现更准确的知识库问答（9/7）

jmeter压力测试，通过LLM利用RAG实现知识库问答，NEO4J部署，GraphRAG以知识图谱在查询时增强提示实现更准确的知识库问答（9/7）

前言 这周也是杂七杂八的一天&#xff08;高情商&#xff1a;我是一块砖&#xff0c;哪里需要往哪里搬&#xff09;&#xff0c;首先是接触了jemter这个压力测试工具&#xff0c;然后帮公司的AIGC项目编写使用手册和问答手册的第一版&#xff0c;并通过这个平台的智能体实现知识…
阅读更多...
【数据结构】排序算法系列——希尔排序（附源码+图解）

【数据结构】排序算法系列——希尔排序（附源码+图解）

希尔排序 算法思想 希尔排序&#xff08;Shell Sort&#xff09;是一种改进的插入排序算法&#xff0c;希尔排序的创造者Donald Shell想出了这个极具创造力的改进。其时间复杂度取决于步长序列&#xff08;gap&#xff09;的选择。我们在插入排序中&#xff0c;会发现是对整体…
阅读更多...
探索数据可视化的奥秘：Seaborn库的魔力

探索数据可视化的奥秘：Seaborn库的魔力

文章目录 探索数据可视化的奥秘&#xff1a;Seaborn库的魔力背景&#xff1a;为何选择Seaborn&#xff1f;Seaborn是什么&#xff1f;如何安装Seaborn&#xff1f;简单函数介绍与示例场景应用示例常见问题与解决方案总结 探索数据可视化的奥秘&#xff1a;Seaborn库的魔力 背景…
阅读更多...
xLSTM模型学习笔记

xLSTM模型学习笔记

笔记来源&#xff1a;bilibili LSTM 回顾 原始的 LSTM 是为了解决 RNN 时序反向传播中梯度消失和爆炸问题而提出的。 其所谓的门控机制&#xff0c;其实就是一种时序上的注意力机制&#xff0c;相当于把不同时间进行"掺和"&#xff0c;是对时序信息的一种选择性控制…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发