当前位置: 首页 > news >正文

web CSS笔记1

CSS(Cascading Style Sheets) 美化样式

CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表(书写位置)

1、内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /* 选择器{

            属性名:属性值;

            属性名:属性值;

        } */

        div {

            width: 300px;

            height: 300px;

            background-color: pink;

        }

    </style>

</head>

2、行内式(内联样式)

 是通过标签的style属性来设置元素的样式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3、外部样式表(外链式)

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中

 <head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

一个CSS文件可以什么都不写,引用其他CSS文件 

@import url(xxx.css的路径)


选择器

1、类选择器(基本选择器)

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 标签调用的时候用 class=“类名”  即可。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.box1 {width: 100px;height: 100px;background-color: pink;}</style></head><body><div class="box1">1111</div></body></html>

2、标签选择器(基本选择器)

标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>div{height: 100px;background-color: pink;}</style></head><body><div >1111</div></body></html>

3、ID选择器(基本选择器)

1、id选择器使用“#”进行标识,后面紧跟id名。

2、id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。

3、W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

4、区别:

        类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

        id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>#box{width: 100px;background-color: pink;}</style></head><body><div id=”box“>1111</div></body></html>

4、通配符选择器(基本选择器)

选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

例如:如下表示设置HTML默认所有字体颜色为白色。

  <style>*{color:white;}</style>

5、子代选择器(包含选择器)

子元素选择器只能选择某元的子元素。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.a>li {color: red;}</style></head><body><ul class="a"><li>你是亲儿子</li><li>我是一个li</li><ul><li>后代</li></ul></ul></body></html>

6、后代选择器(包含选择器)

后代选择器用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

/* 后代选择器  找到所有后代中满足的标签*/

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>a li{color: red;}</style></head><body><ul class="a"><li>你是亲儿子</li><li>我是一个li</li><li>我是一个li</li><li>我是一个li</li><ul><li>后代  <b><li>后代</li></b> </li></ul></ul></body></html>

7、逗号选择器(并集选择器)(包含选择器)

并集选择器(CSS选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式。

<!DOCTYPE html><head><meta charset="UTF-8"><title>Document</title><style>.one, p , #t {color: #F00;font-weight: 700;}</style></head><body><div class="one">佳人们这是类选择器</div><br><span id="t">佳人们这是id选择器</span><br><p>佳人们这是标签选择器</p></body></html>

7.1交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。  

交集选择器 是 并且的意思。 即...又...的意思

比如:   p.one   选择的是: 类名为 .one  的 段落标签。 

用的相对来说比较少,不太建议使用。

8、属性选择器

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/*  */input[type="password"] {background-color: aqua;}/* 具有某个属性的指定标签 */div[title] {background-color: pink;}/* 属性的值中包含某个值 */input[type*="e"] {background-color: blueviolet;}/* 属性值以什么开头 */input[type^="p"] {background-color: brown;}/* 属性值以什么结尾 */input[type$="t"] {background-color: red;}/* +表示的是下一个标签 */.box1+p {background-color: blue;}</style>
</head><body><div title="njdcndc">你是一个盒子</div><div>你是一个da盒子</div><input type="text"><input type="password"><input type="email"><div class="box1">ncjdncjd</div><p>mckdckd</p><p>mckdckd</p>
</body>
</html>

9、伪类选择器 :描述标签的状态的

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/* 访问前 */a:link {color: red;}/* 访问后 */a:visited {color: chartreuse;}/* 鼠标悬停时 */a:hover {color: pink;}/* 鼠标点击时 */a:active {color: darkblue;}/* 需要按照lvha的顺序书写 */</style>
</head><body><a href="#">这是一个链接</a></body>
</html>

9、1:其他伪类选择器

假如想要选择ul标签下的第2个li标签,该如何使用选择器呢?

那么第一个和最后一个呢?第奇或偶个这样的排序可以吗?

<body>

    <ul>

        <li>我是一个li1</li>

        <li>我是一个li2</li>

        <li>我是一个li3</li>

        <li>我是一个li4</li>

        <li>我是一个li5</li>

        <li>我是一个li6</li>

        <li>我是一个li7</li>

        <li>我是一个li8</li>

    </ul>

</body>

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li:nth-child(2) {background-color: green;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: red;}ul li:first-child {background-color: yellow;}</style>
</head>
<body><ul><li>我是一个li1</li><li>我是一个li2</li><li>我是一个li3</li><li>我是一个li4</li><li>我是一个li5</li><li>我是一个li6</li><li>我是一个li7</li><li>我是一个li8</li></ul>
</body>
</html>

若中间插入其他元素,还能识别得到吗?(源代码加上p标签)

    <ul>

        <li>我是一个li1</li>

        <p>我是p</p>

        <li>我是一个li2</li>

        <li>我是一个li3</li>

        <li>我是一个li4</li>

        <li>我是一个li5</li>

        <li>我是一个li6</li>

        <li>我是一个li7</li>

        <li>我是一个li8</li>

          <p>我是p</p>

    </ul>

这时候我们可以看到寻找第二个li标签与最后一个li标签失败

li:nth-child()是先找到li标签的父亲是谁,例子中是ul标签,然后他就给ul标签所有儿子标签排了序,排序过程中并不会辨别标签类别,所以会将p标签一起排进来,但是他一数第二个标签不是li标签,所以识别不了,于是他会在不认识的p标签之下,重新开始数。所以后面的奇数标签有用。

这时我们用个新属性:nth-of-type(),他与上面属性最大的区别就是他会认识类别,并只将指定类别排序。看看代码,让第二个 li 变成粉色。

​
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li:nth-child(2) {background-color: green;}li:nth-child(2n+1) {background-color: blue;}li:last-child {background-color: red;}ul li:first-child {background-color: yellow;}li:nth-of-type(2) {background-color: pink;}</style>
</head>
<body><ul><li>我是一个li1</li><li>我是一个li2</li><li>我是一个li3</li><li>我是一个li4</li><li>我是一个li5</li><li>我是一个li6</li><li>我是一个li7</li><li>我是一个li8</li></ul>
</body>
</html>​

10、伪元素选择器--只能对“块级元素”生效。

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>ul li::before {     /* ul标签中的li标签前面做什么 */content: "66666"; /* 添加文本 */width: 10px;height: 10px;background-color: pink;}ul li::after {  /* ul标签中的li标签后面添加什么 */content: "----------------zhangsan";}/* 文字被选中时 */ul li::selection {background-color: pink;}</style>
</head><body><ul><li>zhangsan</li></ul></body>
</html>


字体与文本

font-size:字号大小

        font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,谷歌默认14px

font-family:字体

        font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

p{ font-family:"微软雅黑";}

font-weight:字体粗细

数字 400 等价于 normal,而 700 等价于 bold。  但是我们倾向用数字来表示。 

font-style:字体风格

        字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

normal:默认值,浏览器会显示标准的字体样式。

italic:浏览器会显示斜体的字体样式。

oblique:浏览器会显示倾斜的字体样式。

line-height设置行高
text-indent 首行缩进,以em为单位
color文本颜色

color=

1、rgb函数(红、绿、蓝)三原色 

2、rgba函数(红、绿、蓝、透明度) 

3、#00FFFF

text-align:水平对齐方式

相当于html中的align对齐属性。

left:左对齐(默认值)

right:右对齐

center:居中对齐,是让盒子里面的内容水平居中

text-decoration 文本的装饰

text-decoration 通常我们用于给链接修改装饰效果。none:           默认。定义标准的文本。

underline:    定义文本下的一条线。下划线是链接自带的

overline:      定义文本上的一条线。

line-through:定义穿过文本下的一条线。

font:综合设置字体样式  

 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

1、使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

2、注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>div{font: italic 600 25px/50px 宋体;line-height: 50px;/* 让行高等于容器的高度,来实现单行文本的垂直居中  */color: blue;text-align: center;background-color: yellow;}</style>
</head>
<body><div>font:综合设置字体样式</div>
</body>
</html>

text-decoration:综合设置文本样式

选择器{text-decoration: text-decoration-style   td-line    td-color    td-thickness;}   

例如 :text-decoration: solid underline purple 4px;

text-decoration-style:设置使用的装饰类型,例如 underline 或者 line-through。 

text-decoration-line:设置装饰的线条的颜色,例如 solidwavy 或者 dashed

text-decoration-color:颜色

text-decoration-thickness:字体粗细


CSS三大特性

1、层叠性

  1. 样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。

  2. 样式不冲突,不会层叠

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color: red;}p {color: yellow;font-style: italic;text-decoration: underline;}p{color: blue;}</style>
</head>
<body><p class="one">层叠性佳人们是什么色</p>
</body>
</html>

2、继承性

子标签会继承父标签的某些属性(字体颜色、字号)

<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>.father {font-size: 30px;color: red;}</style>
</head>
<body><div class="father"><div>你是一个子盒子<div>你是一个子盒子</div></div></div>
</body>
</html>

3、优先级

1、继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。

2、行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。

3、权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。

4、CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。

* 通配符0.0.0.0
元素(标签)0,0,0,1
类,伪类0,0,1,0
ID0,1,0,0
行内样式1,0,0,0
!important 重要的∞ 无穷大
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>Document</title><style>/* * {color: pink;} */div {color: aquamarine !important;}.one {color: blueviolet;}#two {color: brown;}ul li {background-color: blue;}li {background-color: pink;}/* 权重的四位数字不会进行进位,登记大小的判断,从左向右,一次进行比较继承的权重:为0*/a {display: inline-block;}</style>
</head><body><div class="one" id="two">cnvjfvnjfvnjfvnfj</div><ul><li>我是一个li</li></ul><a href="#">充满电充电口</a>
</body></html>

相关文章:

web CSS笔记1

CSS(Cascading Style Sheets) 美化样式 CSS通常称为CSS样式表或层叠样式表&#xff08;级联样式表&#xff09;&#xff0c;主要用于设置HTML页面中的文本内容&#xff08;字体、大小、对齐方式等&#xff09;、图片的外形&#xff08;宽高、边框样式、边距等&#xff09;以及…...

js算法记录

> 更多请前往 https://www.passerma.com/article/86 滑动窗口 1 给定一个矩阵&#xff0c;包含N*M个整数&#xff0c;和一个包含K个整数的数组。现在要求在这个矩阵中找一个宽度最小的子矩阵&#xff0c;要求子矩阵包含数组中所有的整数 function minSubmatrixWidth(mat…...

球面数据的几何深度学习--球形 CNN

目录 一、说明二、球形 CNN概述三、球面数据的对称性四、标准&#xff08;平面&#xff09;CNN的局限性五、卷积并发症六、球面卷积七、球面卷积是不够的 一、说明 球面数据的几何深度学习–球形 CNN。通过对物理世界的平移对称性进行编码&#xff0c;卷积神经网络 &#xff0…...

MySQL学习笔记------SQL(1)

关系型数据库&#xff08;RDBMS&#xff09; 建立在关系模型基础上&#xff0c;由多张相互连接的二维表组成的数据库 特点&#xff1a;使用表储存数据&#xff0c;格式统一&#xff0c;便于维护 使用SQL语言操作&#xff0c;标准统一&#xff0c;使用方便 SQL通用语法 SQL…...

PMP能提前查成绩?还能改分数?别太离谱!

震惊&#xff01;3月10日PMP考试才结束没多久&#xff0c;昨天就有学员收到了查分邮件&#xff0c;寄信人自称自己是内部人员&#xff0c;可以提前查询到成绩并直接修改成绩。 这也太离谱了吧&#xff01;在此&#xff0c;小赛想说&#xff0c;PMP考试是一个公正、严格的考试体…...

【保姆级讲解服务器硬件的基础知识】

服务器硬件基础知识 1. 前言2. 中央处理器&#xff08;CPU&#xff09;3. 内存&#xff08;RAM&#xff09;4. 存储设备5. 主板6. 电源供应单元&#xff08;PSU&#xff09;7. 冷却系统8. 网络连接9. 扩展插槽和端口10. 管理功能 &#x1f308;&#x1f308;&#x1f308;&…...

并查集---力扣547省份的数量

假设&#xff1a;有一群小混混打架&#xff0c;小弟们可能互相不认识&#xff0c;如果要确定他们是一伙的&#xff0c;就需要确定他们的组长是不是一个&#xff0c;但是每个组长的领导可能又不一样&#xff0c;所以要找到最大的那个领导&#xff0c;才能确定是一伙的。 我们先…...

stm32启动文件里面的__main和主函数main()

一、__main和main()之间的关系 先来对stm32启动过程简单学习 启动文件里面的Reset_Handler&#xff1a; 调用过程&#xff1a; stm32在启动后先进入重启中断函数Reset_Handler&#xff0c;其中会先后调用SystemInit和__main函数&#xff0c; __main函数属于c库函数&…...

曲线生成 | 图解Reeds-Shepp曲线生成原理(附ROS C++/Python/Matlab仿真)

目录 0 专栏介绍1 什么是Reeds-Shepp曲线&#xff1f;2 Reeds-Shepp曲线的运动模式3 Reeds-Shepp曲线算法原理3.1 坐标变换3.2 时间翻转(time-flip)3.3 反射变换(reflect)3.4 后向变换(backwards) 4 仿真实现4.1 ROS C实现4.2 Python实现4.3 Matlab实现 0 专栏介绍 &#x1f5…...

深入探讨iOS开发:从创建第一个iOS程序到纯代码实现全面解析

iOS开发作为移动应用开发的重要领域之一&#xff0c;对于开发人员具有重要意义。本文将深入探讨iOS开发的各个方面&#xff0c;从创建第一个iOS程序到纯代码实现iOS开发&#xff0c;带领读者全面了解iOS应用程序的开发流程和技术要点。 &#x1f4f1; 第一个iOS程序 在创建第…...

Python学习之-正则表达式

目录 前言&#xff1a;1.re.serach1.1例子&#xff1a; 2.re.match2.1示例1&#xff1a;2.2 示例2&#xff1a; 3.re.findall3.1 示例 4.re.fullmatch4.1 示例1&#xff1a;4.2 示例2: 5.re.split5.1 示例1:5.2 示例2&#xff1a;5.3 示例3&#xff1a; 6.re.sub6.1 示例&#…...

Godot.NET C# 工程化开发(1):通用Nuget 导入+ 模板文件导出,包含随机数生成,日志管理,数据库连接等功能

文章目录 前言Github项目地址&#xff0c;包含模板文件后期思考补充项目设置编写失误环境visual studio 配置详细的配置看我这篇文章 Nuget 推荐NewtonSoft 成功Bogus 成功Github文档地址随机生成构造器生成构造器接口(推荐) 文件夹设置Nlog 成功&#xff01;Nlog.configNlogHe…...

数据仓库——雪花模式以及层次递归

层次结构 钻取 向下钻取&#xff1a;对某些代表事实的报表中添加维度细节 向上钻取&#xff1a;从某些代表事实的报表中去除维度细节 属性层次 提供了一种自然方法&#xff0c;用于顺序地在不断深入的层次上组织事实。许多维度可以被理解为包含连续主从关系的属性层次。此类…...

Transformer的前世今生 day09(Transformer的框架概述)

前情提要 编码器-解码器结构 如果将一个模型分为两块&#xff1a;编码器和解码器那么编码器-解码器结构为&#xff1a;编码器负责处理输入&#xff0c;解码器负责生成输出流程&#xff1a;我们先将输入送入编码器层&#xff0c;得到一个中间状态state&#xff0c;并送入解码器…...

Qt 压缩/解压文件

前面讲了很多Qt的文件操作&#xff0c;文件操作自然就包括压缩与解压缩文件了&#xff0c;正好最近项目里要用到压缩以及解压缩文件&#xff0c;所以就研究了一下Qt如何压缩与解压缩文件。 QZipReader/QZipWriter QZipReader 和 QZipWriter 类提供了用于读取和写入 ZIP 格式文…...

【leetcode刷题之路】面试经典150题(8)——位运算+数学+一维动态规划+多维动态规划

文章目录 20 位运算20.1 【位运算】二进制求和20.2 【位运算】颠倒二进制位20.3 【位运算】位1的个数20.4 【位运算】只出现一次的数字20.5 【哈希表】【位运算】只出现一次的数字 II20.6 【位运算】数字范围按位与 21 数学21.1 【双指针】回文数21.2 【数学】加一21.3 【数学】…...

JetBrains全家桶激活,分享 WebStorm 2024 激活的方案

大家好&#xff0c;欢迎来到金榜探云手&#xff01; WebStorm公司简介 JetBrains 是一家专注于开发工具的软件公司&#xff0c;总部位于捷克。他们以提供强大的集成开发环境&#xff08;IDE&#xff09;而闻名&#xff0c;如 IntelliJ IDEA、PyCharm、和 WebStorm等。这些工具…...

Sublime 彻底解决中文乱码

1. 按ctrl&#xff0c;打开Console&#xff0c;输入如下代码&#xff1a; import urllib.request,os; pf Package Control.sublime-package; ipp sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHand…...

复旦大学EMBA校友出席两会建言献策助力中国发展

阳春三月&#xff0c;备受瞩目的全国两会如期召开。期间&#xff0c;复旦大学EMBA多位校友作为第十四届全国人民代表大会代表、第十四届全国政协委员与全国各地代表共商国是。      无论是作为大型央企负责人&#xff0c;还是作为科创企业的中坚力量&#xff0c;复旦大学EM…...

virtualbox导入vdi

新建虚拟机 点击新建 输入新建属性 配置cpu和内存 虚拟硬盘 这里选择已有的vdi文件 摘要 这里点击完成 虚拟机添加成功 点击启动&#xff0c;启动虚拟机 注意 这个时候的ip&#xff0c;还是以前镜像的ip&#xff0c;如果两个镜像一起启动&#xff0c;则需要修 改ip地…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

【AI学习】三、AI算法中的向量

在人工智能&#xff08;AI&#xff09;算法中&#xff0c;向量&#xff08;Vector&#xff09;是一种将现实世界中的数据&#xff08;如图像、文本、音频等&#xff09;转化为计算机可处理的数值型特征表示的工具。它是连接人类认知&#xff08;如语义、视觉特征&#xff09;与…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...