css3 选择器_CSS 3
2024-05-11 00:40:01
好好学习，天天向上
本章主要内容为：CSS3 新增选择器(子级、兄弟、结构伪类、伪元素、属性)、CSS3盒模型、CSS3边框、文字阴影、边框阴影、过渡属性、2D转换、3D转换
一、CSS3 新增选择器
Ⅰ、子级选择器
- 子级选择器用于选取带有特定父元素的元素
- 书写语法：element1 > element2
- 注意：如果 element2 元素不是父元素 element1 的直接子元素，则不会被选择
- > 符号之前书写父级的选择器，> 符号之后写子级选择器，必须满足父子级关系才能选中标签
.box > p {background-color: orange;
}.inner > p {background-color: palegreen;
}p {background-color: peru;
}<div class="box"><p> 这是 box 中的 p 标签 </p><p> 这是 box 中的 p 标签 </p><div class="inner"><p> 这是 inner 中的 p 标签 </p></div>
</div><p> 这是单独的 p 标签 </p>示例图：
Ⅱ、兄弟选择器
| 选择器 | 简介 |
|---|---|
| element1 + element2 | 匹配同一个父元素中紧跟在element1后面的一个element2元素 |
| element1 ~ element2 | 匹配同一个父元素中在element1后面的所有element2元素 |
相邻兄弟选择器
- 相邻兄弟选择器可以用于选择紧接在另一个元素后的兄弟元素，而且二者有相同的父元素
- 书写语法：element1 + element2
注意：
- 选中的是紧跟在 element1 之后的同级元素 element2
- 只能选中紧跟在后面的一个 element2 元素
- 二者有相同的父元素
- + 符号前后可以添加空格书写
<style>
/* 意思就是选中 box1 内部的 h1 后面的第一个满足 p 的条件*/
.box1 h1 + p {background-color: peru;
}
</style><div class="box1"><h1> 一级标题 </h1><p> 段落1 </p><p> 段落2 </p><p> 段落3 </p><p> 段落4 </p>
</div>示例图：
其他兄弟选择器
- 其他兄弟选择器匹配同一个父元素中在 element1 后面的所有 element2 元素
- 书写语法：element1 ~ element2
注意：
- 选择 element1 之后出现的所有 element2
- 两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1
- ~ 符号前后可以添加空格书写
.box1 h1 ~ p {background-color: peru;
}Ⅲ、结构伪类选择器
| 选择器 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
nth-child（n）
- n 可以是数字，关键字和公式
- n 如果是数字，就是选择第 n 个
- 常见的关键词 even 偶数 odd 奇数
- 常见的公式如下 ( 如果 n 是公式，则从 0 开始计算，n是从 0 ，1，2，3… 一直递增）
- 但是第 0 元素或者超出了元素的个数会被忽略
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15 …… |
| n+5 | 从第5个开始（包含第5个）到最后，5 6 7 8 9 …… |
| -n+5 | 前5个（包含第5个），5 4 3 2 1 0…… |
.box1 :first-child {background-color: pink;
}
.box1 :last-child {background-color: purple;
}
.box1 :nth-child(4) {background-color: rgb(102, 99, 99);
}/* .box1 p:nth-child(odd) {background-color: violet;
} *//* .box1 p:nth-child(3n) {background-color: violet;
} *//* .box1 p:nth-child(n + 4) {background-color: violet;
} */.box1 p:first-of-type {background-color: royalblue;
}
.box1 p:last-of-type {background-color: seagreen;
}
.box1 p:nth-of-type(3) {background-color: springgreen;
}<div class="box1"><!-- <p> 段落 </p> --><h1> 一级标题 </h1><h1> 一级标题 </h1><p> 段落1 </p><p> 段落2 </p><p> 段落3 </p><p> 段落4 </p><h1> 一级标题 </h1>
</div>E:nth-child(n) 和 E:nth-of-type(n) 的区别
- E:nth-child(n) 匹配父元素的第 n 个子元素 E，同时需要满足两个条件
- E:nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 E，会忽视其他同级的非同类型元素
Ⅳ、伪元素选择器
新增伪元素
| 选择器 | 介绍 |
|---|---|
| E::before | 在 E 元素内部的前面插入一个元素 |
| E::after | 在 E 元素内部的后面插入一个元素 |
| E::first-letter | 选择到了 E 容器内的第一个字母 |
| E::first-line | 选择到了 E 容器内的第一行文本 |
* {margin: 0;padding: 0;
}
.box {width: 400px;padding: 10px;border: 2px solid black;
}
.box p {width: 50px;height: 50px;margin-bottom: 10px;background-color: blue;
}/* 给 box 盒子内部添加伪元素 */
.box::before {content: "1";display: block;height: 50px;background-color: orange;
}
.box::after {content: "2";display: block;height: 50px;background-color: orange;
}
.p1::first-letter {color: red;
}
.p2::first-line {color: red;
}<div class="box"><p class="p1"> 这是一个段落</p><p class="p2">这是一个段落</p><p></p><p></p>
</div>示例图：
h5 写法和传统写法区别
- 单冒号 E:before
- 双冒号 E::before
- 浏览器对以上写法都能识别，双冒号是 h5 的语法规范
伪元素的注意事项
- 伪元素只能给双标签添加，不能给单标签添加
- 伪元素的冒号前不能有空格，如 E ::before 这个写法是错误的
- 伪元素里面必须写上属性 content: “” ;
- before 和 after 创建一个元素，但是属于行内元素
- 因为在 DOM 里面看不见刚才创建的元素，所以我们称为伪元素
Ⅴ、属性选择器
属性选择器用来选择包含指定属性的标签
| 选择器 | 简介 |
|---|---|
| E[att] | 选择具有att属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性、且值以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性、且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性、且值中含有val的E元素 |
/* input[name] {width: 30px;height: 30px;
} *//* input[type="checkbox"] {width: 30px;height: 30px;
} *//* input[class^="icon"] {width: 30px;height: 30px;
} */
/* input[class$="dan"] {width: 30px;height: 30px;
} */
input[type*="o"] {width: 30px;height: 30px;
}<p><input type="radio" name="sex" class="icon-dan"> 男性<input type="radio" name="sex" class="icon-dan"> 女性
</p><p><input type="checkbox" class="icon-duo"> 第一<input type="checkbox" class="icon-duo"> 第二
</p>
选择器权重
- 基础选择器：id 选择器 > 类选择器 > 标签选择器 > *
- 伪类选择器、属性选择器的权重等于类选择器
- 伪元素选择器的权重等于标签选择器
二、CSS3 盒模型
- CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度
| 属性值 | 简介 |
|---|---|
| content-box |
默认值，标准盒子模型，盒模型是外扩的 width 与 height 只包括内容的宽和高 在 width 和 height 之外绘制元素的内边距和边框 |
| border-box |
怪异模式，盒模型是内减的 width 和 height 属性包括内容，内边距和边框，但不包括外边距 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制 |
content-box 标准模式
- Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分
border-box 怪异模式
- Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后， 内容区域会收缩
* {margin: 0;padding: 0;
}div {width: 100px;height: 100px;padding: 10px;border: 10px solid red;background-color: orchid;}
.box1 {box-sizing: content-box;
}.box2 {box-sizing: border-box;}示例图：
三、CSS3 新增属性
Ⅰ、边框圆角
- 属性名：border-radius
- 作用：设置边框的圆角
- 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比
| 属性值 | 说明 |
|---|---|
| x-radius / y-radius | / 分割两部分属性值，前面为水平半径，后面为垂直半径， 得到的是椭圆角 |
| radiu | 一个属性值，则水平和垂直都设置为同一个值，得到的是圆角 |
单一属性
- border-top-left-radius: 半径;
- border-top-right-radius: 半径;
- border-bottom-right-radius: 半径;
- border-bottom-left-radius: 半径;
border-top-left-radius: 50px;简写方法
- border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法
- border-radius: 左上角 右上角 右下角 左下角;
- border-radius: 左上角 右上角 和 左下角 右下角;
- border-radius: 左上角 和 右下角 右上角 和 左下角;
- border-radius: 四个角相同;
border-radius: 10px 20px 30px 40px;/ 的属性值写法
- border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法
.box1 {border-radius: 10px 20px 40px / 50px 60px;
}
.box2 {border-radius: 10px 20px 40px;
}示例图：
Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持
Ⅱ、文字阴影
- 在 CSS3 中，text-shadow 可向文本应用阴影，通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色
| 属性值 | 简介 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
文字阴影语法
- text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行规定，省略的长度是 0
.word {margin: 50px;font: bold 30px/60px "楷体";/* 文字阴影： 水平位置 垂直位置 模糊程度 颜色 */text-shadow: 3px 3px 5px #f00;
}示例图：
多层阴影
- text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值
- 注意：多阴影中，先写的阴影压盖在后写的阴影上
.word {margin: 50px;font: bold 30px/60px "楷体";/* 文字阴影： 水平位置 垂直位置 模糊程度 颜色 */text-shadow: 3px 3px 5px #f00,6px 6px 5px steelblue,9px 9px 5px orangered
}示例图：
Ⅲ、边框阴影
- CSS3 中，box-shadow 属性用于对盒子边框添加阴影
| 属性值 | 简介 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影改为内部阴影 |
边框阴影语法
- box-shadow 属性向盒子添加阴影，属性值有 2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0
.box2 {/* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影 inset */box-shadow: 10px 10px 5px 10px slateblue ;
}多层阴影
- box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值
- 注意：多阴影中，先写的阴影压盖在后写的阴影上
.box2 {/* 边框阴影： 水平位置 垂直位置 模糊程度 扩展大小 颜色 是否内边框阴影inset */box-shadow: 10px 10px 5px 10px slateblue ,20px 20px 5px 10px red ;
}Ⅳ、过渡属性
- 属性名：transition
- 作用：在不使用 Flash 动画 或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果）， 并且当前元素只要有“属性”发生变化时即存在两种状态(我们用 A 和 B 代指），那么 A 和 B 之间就可以实现平滑的过渡的动画效果，为了方便看效果，我们使用 :hover 切换状态
- 语法格式： transition: 过渡的属性 过渡时间 运动曲线 延时时间;
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transiton-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间，默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线，默认是 “ease” |
| transition-delay | 规定过渡效果何时开始，默认是 0 |
transition-property 过渡的属性
- none 表示没有属性过渡
- all 表示所有变化的属性都过渡
- 属性名使用具体的属性名，多个属性名中间逗号分隔
时间
- 过渡时间：以 s 秒为单位
- 延时时间：以 s 秒为单位，0 s也必须加单位
transition-timing-function 时间曲线
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束 |
| ease | 规定慢速开始，然后变快，然后慢速结束 |
| ease-in | 规定以慢速开始 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| cubic-bezier(x1,y1,x2,y2) |
在 cubic-bezier 函数中定义自己的值，x1、x2取是 0 至 1 之间的数值， y1、y2取值任意，四个数值表示拉扯的点的两个坐标 |
贝塞尔曲线
示例:
.box {width: 100px;height: 100px;margin: 10px;background-color: skyblue;/* 过渡属性：属性 过渡时间 时间曲线 延迟时间 */transition: all 2s linear 2s;
}
.box:hover{width: 300px;height: 300px;
}示例图：
Ⅵ、2D转换
- 属性名：transform
- 作用：对元素进行移动、缩放、旋转、拉长或拉伸，配合过渡和即将学习的动画知识，可以取代大量之前只能靠 Flash 才可以实现的效果
- 属性值：多种转换方法的属性值，可以实现不同的转换效果
位移 translate()
- transform 的属性值为 translate() 时，可以实现位移效果
| 值 | 说明 |
|---|---|
| translate(x,y) | x,y 分别为水平和垂直方向位移的距离，可以为 px 值或百分比， 区分正负 |
| translate(x) | 只有一个数值，表示水平方向的位移 |
* {margin: 0;padding: 0;
}
.box {width: 222px;height: 222px;margin: 100px auto;border: 2px solid red;
}.box img {transform: translate(30px,30px);
}.box2 {position: relative;width: 500px;height: 100px;border: 2px solid black;
}
.box2 p {position: absolute;left: 50%;width: 100px;height: 100%;transform: translate(-50%);background-color: coral;
}<div class="box"><img src="data:images/lagouwang.jpg" alt="">
</div><div class="box2"><p> 设置居中</p>
</div>示例图：
缩放 scale()
- transform 的属性值为 scale() 时，可以实现元素缩放效果
| 值 | 说明 |
|---|---|
| scale(x, y) | x,y 分别为改变元素的宽度和高度的倍数 |
| scale(n) | 只有一个值，表示宽度和高度同时缩放n倍 |
| scaleX(n) | 改变元素的宽度 |
| scaleY(n) | 改变元素的高度 |
.box img {transform: scale(1,0.5);
}旋转 rotate()
- transform 属性值设置为 rotate() 时，实现元素的旋转
- rotate(数字deg)
- 其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值
- 元素旋转后，坐标轴也跟着发生转变
- 多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异
.box img {/* 旋转 */transform: rotate(20deg);/* 先位移后旋转 *//* transform: translate(100px) rotate(20deg); *//* 先旋转后位移 *//* transform: rotate(20deg) translate(100px); */}倾斜 skew()
- transform 属性值设置为 skew() 时，实现元素的倾斜
- transform: skew(数字deg,数字deg)
- 两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0
.box img {transform: skew(20deg);
}transformorigin 属性
- 作用：设置调整元素的水平和垂直方向原点的位置
- 调整元素的基准点
- 属性值：包含两个，中间使用空格分隔
| 值 | 说明 |
|---|---|
| x | 定义 x 轴的原点在何处，可能的值：left 、center、right、像素值、百分比 |
| y | 定义 y 轴的原点在何处，可能的值：top、center、bottom、像素值、百分比 |
.box img {transform-origin: left 50%;transform: rotate(20deg);
}示例图：
Ⅶ、案例-2D转换卡包特效
效果图：
代码地址：
01-02-task -materials/2D转换-卡包特效案例.html · 吴腾辉/前端案例和应用源码 - Gitee.comgitee.com
Ⅷ、3D 转换
透视属性 perspective
- 属性名：perspective
- 作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果
- 属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸
- 注意：透视属性需要设置给 3D 变化元素的父级
.box {width: 222px;height: 222px;margin: 100px auto;border: 2px solid red;perspective: 500px;
}.box img {transition: all 1s ease;
}
.box img:hover {transform: rotateX(60deg);
}3D 旋转
- 3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值
| 值 | 说明 |
|---|---|
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转 |
- 属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针 方向旋转
.box img {transition: all 1s ease;
}
.box img:hover {transform: rotateX(60deg);/* transform: rotateY(60deg);transform: rotateZ(60deg); */
}3D 位移
- 类似的，位移也分为三个方向的移动
| 值 | 说明 |
|---|---|
| translateX(x) | 设置 X 轴的位移值 |
| translateY(y) | 设置 Y 轴的位移值 |
| translateZ(z) | 定义3D位移，设置Z轴的位移值 |
.box img:hover {transform: translateX(50px);/* transform: translateY(50px);transform: translateZ(50px); */
}示例图：
Ⅸ、3D案例-正方体
- transform-style属性
- 用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴
属性值：
- flat：所有子元素在 2D 平面呈现
- preserve-3d：保留 3D 空间
- 3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形
- 一般来说，该属性设置给 3D 变换图形的父级元素
效果图：
代码地址：
01-02-task -materials/3D正方体案例.html · 吴腾辉/前端案例和应用源码 - Gitee.comgitee.com
Ⅹ、动画
css3 动画制作分为两步：创建动画、绑定动画
@keyframes 规则
- @keyframes 规则用于创建动画
- 在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果
- 可以改变任意多的样式任意多的次数
- 需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to” ，等同于 0% 和 100%
- 0% 是动画的开始，100% 是动画的完成
@keyframes 书写方法
@keyframes 动画名称 { 动画过程，可以添加任意百分比处的动画细节 }
animation 属性
- 需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果
- animation 属性用于对动画进行捆绑
- 语法： div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;}
- 其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
| 属性 | 描述 |
|---|---|
| animation-name | 规定 @keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是 0 |
| animationtiming-function | 规定动画的速度曲线，默认是 “ease” |
| animationdelay | 规定动画何时开始，默认是 0 |
| animationiteration-count | 规定动画被播放的次数，默认是 1，infinite表示无限次播放 |
* {margin: 0;padding: 0;
}
.box {width: 100px;height: 100px;border-radius: 50%;margin: 200px auto;background-color: skyblue;/* 添加绑定动画 *//* animation: move 3s linear 3 1s; *//* animation: move2 3s linear 3 1s; */animation: move2 3s linear infinite;
}/* 自定义动画，过程 */
@keyframes move {/* 从头开始 最好保持跟默认样式状态一致 */from {transform: translateY(0);}/* 到结束位置 */to {transform: translateY(150px);}
}/* 百分比定义动画细节 */
@keyframes move2 {0% {transform: translateY(0);}25% {transform: translateY(100px);}50% {transform: translateY(0);}75% {transform: translateY(-100px);}100% {transform: translateY(0);}
}css3 选择器_CSS 3相关推荐
- CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
- CSS3 选择器(转)
http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器 在 CSS 中,选择器 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
- CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
- html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- html选择器是什么,CSS3选择器是什么？
首先我们来看一下displaynone的意思是什么? display:none的意思: 隐藏元素并脱离文档,流就是隐藏该区域,不占实际空间,但对后台来说真实存在,可以获取被隐藏的元素简单的来说就是将元 ...
- CSS3 选择器 基本选择器介绍
CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选 ...
最新文章
- 理解OpenGL中帧缓存FrameBuffer 渲染缓存RenderingBuffer
- 各大网站屏蔽搜索引擎抓取分析
- Confluence 6 SQL Server 测试你的数据库连接
- 江苏2021年新高考八省联考成绩查询,2021八省联考成绩什么时候出 2021八省联考江苏成绩公布...
- Qt 之 QToolBox
- python时间序列函数_Python中的时间序列分解函数
- c 游戏服务器提前生成一批账号,天涯明月刀第一批天涯合璧 数据互通公告
- Flink catalog简单使用
- Java实习日记（1）
- chrome浏览器安装crx Mouse（鼠标手势）插件
- H3C交换机设置时间命令
- 【深度学习】搭建类似LeNet-5网络识别Fashion-MNIST数据集(衣服，鞋子等)
- opencv-python的颜色检测追踪
- Win11耗电严重怎么解决 Win11耗电太快教程
- 人脸识别原理：（初级篇）内含PPT
- 四旋翼无人机——导航、制导与控制的概念
- androidjni开发！应聘高级Android工程师历程感言，快来收藏！
- 数据结构与算法[LeetCode]——sqrt(x)
- Spring框架—③依赖注入DI、Bean作用域及自动装配
- CSDN页面左侧添加自己的微信公众号