CSS学习笔记之中级教程（二）

-.+CSS学习笔记之中级教程（一）

6、CSS 布局 - display: inline-block

  • 与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

  • 同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

  • 与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css">
</head>
<style>span.inline{display: inline;width: 100px;height: 100px;background-color: yellow;padding: 10px;}span.inline-block{display: inline-block;width: 100px;height: 100px;background-color: yellow;padding: 10px;overflow: auto;}span.block{display: block;width: 100px;height: 100px;background-color: yellow;padding: 10px;overflow: auto;}</style>
<body><p>内容内容<span class="inline">inline:行内元素，设置的有边距 但是该性质下不起效</span></p>
<br>
<p>内容内容<span class="inline-block">inline-block:行内块元素，设置的有边距 该性质下起效，且末尾不会添加换行符</span></p>
<br>
<p>内容内容<span class="block">block:块元素，设置的有边距 该性质下起效，元素为另起一行展示，且单独占一行</span>哈哈哈哈</p></body>
</html>

运行效果：
在这里插入图片描述
示例2：
使用 display: inline-block;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>ul {background-color: yellow;}li {display: inline-block;padding: 10px 15px;}a {text-decoration: none;padding: 10px 15px;}/* 鼠标选中效果 */a:hover {background-color: cadetblue;color: white;}</style>
</head><body><ul><li><a href="html_jump_page.html">首页</a></li><li><a href="html_jump_page.html">关于我们</a></li><li><a href="html_jump_page.html">控制台</a></li><li><a href="html_jump_page.html">我的</a></li></ul></body></html>

运行效果：
在这里插入图片描述
不使用：

在这里插入图片描述

  • display: inline-block;效果类似于float:left 但是display: inline-block;子元素间会产生间距

7、CSS 布局 - 水平和垂直对齐

7.1 居中对齐元素：margin: auto;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.center {/* 水平居中 */margin: auto;border: 1px solid #777;width: 200px;}</style>
</head><body><div class="center">你好,中国</div>
</body></html>

运行效果：
在这里插入图片描述

7.2 居中对齐文本： text-align: center;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.center {border: 1px solid #777;text-align: center;}</style>
</head><body><div class="center">你好,中国</div>
</body></html>

运行效果：
在这里插入图片描述

7.3 居中对齐图像

  • 使图像居中，请将左右外边距设置为 auto，并使其成为一个块元素.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>img.center {display: block;margin-left: auto;margin-right: auto;}</style>
</head><body><img class="center" src="imgs/icon_mess_sellorder.png" alt="pic">
</body></html>

运行效果：
在这里插入图片描述

7.4 左和右对齐

  • position
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.right {position: absolute;right: 0px;border: 1px solid #73AD21;padding: 15px 10px;}</style>
</head><body><h1>使用position:absolute来使元素右对齐</h1><div class="right">内容内容内容内容内容内容</div></body></html>

运行效果：
在这里插入图片描述

  • float
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.right {position: absolute;right: 0px;border: 1px solid #73AD21;padding: 15px 10px;}div.floatright{float: right;border: 1px solid #73AD21;padding: 15px 10px;margin-right: 20px;}</style>
</head><body><h1>使用float: right来使元素右对齐</h1><div class="floatright">内容内容内容内容内容内容</div></body></html>

7.5 垂直对齐

7.5.1 padding

<!DOCTYPE html> 
<html lang="en"><head><meta charset="UTF-8">                                                                       <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.center_padding{padding: 70px 0;border: 2px solid #777;           text-align: center;  }</style>
</head><body> <div class="center_padding">内容内容内容内容内容内容</div></body></html>

7.5.2 line-height

另一个技巧是使用其值等于 height 属性值的 line-height 属性：

<!DOCTYPE html> 
<html lang="en"><head><meta charset="UTF-8">                                                                       <meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div.center2{line-height: 100px;height: 100px;border: 2px solid #777;      text-align: center;       }</style>
</head><body> <div class="center2">内容内容内容内容内容内容</div></body></html>

多行内容时候使用：

   div.center2{line-height: 1.5;border: 2px solid #777;      text-align: center;   display:inline-block;    }

7.5.3 position 和 transform

.center { height: 200px;position: relative;border: 3px solid green; 
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

7.5.4 Flexbox

.center {display: flex;justify-content: center;align-items: center;height: 200px;border: 3px solid green; 
}

8、CSS 组合器

  • 组合器是解释选择器之间关系的某种机制。

  • CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

  • 后代选择器 (空格)
  • 子选择器 (>)
  • 相邻兄弟选择器 (+)
  • 通用兄弟选择器 (~)

8.1 后代选择器

后代选择器匹配属于指定元素后代的所有元素。

下面的例子选择 <div> 元素内的所有 <p> 元素：

div p {background-color: yellow;}

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div  p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p><section><p>哈哈哈</p></section></div><p>内容3</p><p>内容4</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

8.2 子选择器

  • 子选择器匹配属于指定元素子元素的所有元素。

下面的例子选择属于 <div> 元素子元素的所有 <p>(直系p元素) 元素：
选择其父元素是 <div> 元素的所有 <p> 元素。

div > p {background-color: yellow;
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div > p {background-color: yellow;}</style>
</head><body><p>内容1</p>
<div><p>内容2</p><section><p>内容3</p></section>
</div></body></html>

运行效果：

在这里插入图片描述

8.3 相邻兄弟选择器

  • 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

  • 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：

div + p {background-color: yellow;
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div+p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p></div><p>内容3</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

8.4 通用兄弟选择器

  • 通用兄弟选择器匹配属于指定元素的同级元素的所有元素。

下面的例子选择属于 <div> 元素的同级元素的所有 <p> 元素：

div ~ p {background-color: yellow;
}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div ~ p {background-color: yellow;}</style>
</head><body><p>内容1</p><div><p>内容2</p></div><p>内容3</p><p>内容4</p><p>内容4</p></body></html>

运行效果：
在这里插入图片描述

9、CSS 伪类

9.1 什么是伪类？

  • 伪类用于定义元素的特殊状态。

例如，它可以用于：

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

9.2 伪类的语法

selector:pseudo-class {property: value;
}

9.3 锚伪类

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {color: red;
}/* visited link */
a:visited {color: green;
}/* mouse over link */
a:hover {color: hotpink;
}/* selected link */
a:active {color: blue;
}
</style>
</head>
<body><h1>CSS 链接</h1>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后才能生效。</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后才能生效。</p></body>
</html>

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。

9.4 伪类和 CSS 类

伪类可以与 CSS 类结合使用：

当您将鼠标悬停在例子中的链接上时，它会改变颜色：

a.highlight:hover {color: #ff0000;
}

在

元素上使用 :hover 伪类的实例： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>div:hover {background-color: yellow;}</style>
</head><body><p>将鼠标移到下面的div元素上面来改变其背景色</p><div>把鼠标移到我上面</div></body></html>

在 <div> 元素上使用 :hover 伪类来展示提示的实例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p {/* 默认隐藏 */display: none;background-color: yellow;padding: 20px;}div:hover p {display: block;}</style>
</head>
<body><div>把鼠标移到我上面<p>哈哈哈 提示内容</p></div>
</body>
</html>

运行效果：
默认不展示p元素，将鼠标放在div上之后p元素展示

9.5 CSS - :first-child 伪类

  • :first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

  • 匹配首个 <p> 元素

（1）在下面的例子中，选择器匹配作为任何元素的第一个子元素的任何 <p>元素：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p:first-child {background-color: yellow;}</style>
</head><body><p>内容1</p><p>内容2</p>
</body></html>

运行效果：
在这里插入图片描述
（2）匹配所有 <p> 元素中的首个 <i> 元素示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p i:first-child {background-color: yellow;}</style>
</head><body><p>内容1</p><p>内容2<i>第一个i</i><i>第二个i</i></p>
</body></html>

运行效果：
在这里插入图片描述
（3） 匹配所有首个 <p> 元素中的所有 <i> 元素示例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p:first-child i{background-color: yellow;}</style>
</head><body><p>我很<i>强壮</i></p><p>内容2<i>第一个i</i><i>第二个i</i></p>
</body></html>

运行效果：
在这里插入图片描述

9.6 CSS - :lang 伪类

  • :lang 伪类允许您为不同的语言定义特殊的规则。

在下面的例子中，:lang 为属性为 lang="en" 的 <q> 元素定义引号：

<html>
<head>
<style>
q:lang(en) {quotes: "~" "~";
}
</style>
</head>
<body><p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p></body>
</html>

运行效果：
在这里插入图片描述

9.7 所有 CSS 伪类+所有 CSS 伪元素

CSS 伪类

10、CSS 伪元素

10.1 什么是伪元素？

  • CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

  • 设置元素的首字母、首行的样式
  • 在元素的内容之前或之后插入内容

10.2 伪元素的语法

selector::pseudo-element {property: value;
}

10.3 ::first-line 伪元素

  • 伪元素用于向文本的首行添加特殊样式。
  • 注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p::first-line{background-color: yellow;}</style>
</head><body><p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p></body></html>

运行效果：
在这里插入图片描述

10.4 ::first-letter 伪元素

  • 伪元素用于向文本的首字母添加特殊样式。
  • 注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 “float” 为 “none”）
  • text-transform
  • line-height
  • float
  • clear
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p::first-letter{background-color: yellow;}</style>
</head><body><p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p></body></html>

运行效果：
在这里插入图片描述

10.5 伪元素和 CSS 类

    p.intro::first-letter{background-color: yellow;}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p.intro::first-letter{background-color: yellow;}</style>
</head><body><p class="intro">这是一个标题</p><p>这是内容</p></body></html>

运行效果：
在这里插入图片描述

10.6 多个伪元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p::first-line{color: blue;}p::first-letter{background-color: yellow;}</style>
</head><body><p >您可以结合 ::first-letter 和 ::first-line 伪元素来为文本的首字母和首行添加特殊效果！</p></body></html>

运行效果：
在这里插入图片描述

10.7 ::before 伪元素

  • 伪元素可用于在元素内容之前插入一些内容。
  p::before{content: url(imgs/icon_mess_sellorder.png);}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p::before{content: url(imgs/icon_mess_sellorder.png);}</style>
</head><body><p >::before 伪元素在一个元素的内容之前插入内容。</p></body></html>

运行效果：
在这里插入图片描述

10.8 ::after 伪元素

  • 伪元素可用于在元素内容之后插入一些内容。
 p::after{content: url(imgs/icon_mess_sellorder.png);}

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/baseStyle.css"><style>p::after{content: url(imgs/icon_mess_sellorder.png);}</style>
</head><body><p >::before 伪元素在一个元素的内容之前插入内容。</p></body></html>

运行效果：
在这里插入图片描述

10.9 ::selection 伪元素

  • 伪元素匹配用户选择的元素部分。

以下 CSS 属性可以应用于 ::selection：

  • color
  • background
  • cursor
  • outline
<!DOCTYPE html>
<html>
<head>
<style>
::-moz-selection { /* 针对 Firefox 的代码 */color: red;background: yellow;
}::selection {color: red;background: yellow;
}
</style>
</head>
<body><h1>请选择本页中的文本：</h1><p>这是一个段落。</p>
<div>这是 div 元素中的文本。</div><p><b>注释：</b>Firefox 支持可供替代的 ::-moz-selection 属性。</p></body>
</html>

运行效果：
鼠标选中前：
在这里插入图片描述

鼠标长按移动选中后：
在这里插入图片描述

11、CSS 不透明度 / 透明度

  • opacity 属性的取值范围为 0.0-1.0。值越低，越透明
img {opacity: 0.5;
}

div {background: rgba(76, 175, 80, 0.3) /* 不透明度为 30% 的绿色背景 */
}

11.1 透明悬停效果

  • 鼠标未悬停时候透明度为0。5，鼠标放置在元素上后透明度为1
img {opacity: 0.5;
}img:hover {opacity: 1.0;
}

12、CSS 垂直导航栏

CSS 垂直导航栏

13、CSS 水平导航栏

CSS 水平导航栏

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

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

相关文章

【C语言】通讯录系统实现

【C语言】通讯录系统实现

目录 1、通讯录系统介绍 2、代码分装 3、代码实现步骤 3.1制作菜单函数以及游戏运行逻辑流程 3.2、封装人的信息PeoInfo以及通讯录Contact结构体类型 3.3、初始化通讯录InitContact函数 3.4、增加联系人AddContact函数 3.5、显示所有联系人ShowContact函数 3.6、删除联系人D…
阅读更多...
libsndfile读取wav文件基本属性

libsndfile读取wav文件基本属性

本文的目的是提供一种方法读取wav文件的基本属性&#xff1a;音频帧数&#xff0c;格式、通道数和采样率信息。 代码如下所示&#xff1a; #include <iostream> #include <QDebug> #include "sndfile.h"using namespace std;int main() {// 初始化 ALS…
阅读更多...
全网最全的基于电机控制的38类simulink仿真全家桶----新手大礼包

全网最全的基于电机控制的38类simulink仿真全家桶----新手大礼包

整理了基于电机的38种simulink仿真全家桶&#xff0c;包含多种资料&#xff0c;类型齐全十分适合新手学习使用。包括但是不局限于以下&#xff1a; 1、基于多电平逆变器的无刷直流电机驱动simulink仿真 2、基于负载转矩的感应电机速度控制simulink仿真 3、基于滑膜观测器的永…
阅读更多...
【35分钟掌握金融风控策略29】贷中模型调额调价策略

【35分钟掌握金融风控策略29】贷中模型调额调价策略

目录 贷中客户风险管理和客户运营体系 用信审批策略 用信审批策略决策流与策略类型 贷中预警策略 对存量客户进行风险评级 基于客户的风险评级为客户匹配相应的风险缓释措施和建议 调额策略 基于定额策略的调额策略 基于客户在贷中的风险表现的调额策略 调价策略 存…
阅读更多...
python接口测试之tokensession的处理

python接口测试之tokensession的处理

使用python语言来进行实现&#xff0c;在这里我们使用第三方的库requests&#xff0c;需要单独的安装下&#xff0c;安装的命令是&#xff1a; pip install -U requests 见安装的截图&#xff1a; 安装成功后&#xff0c;如果可以在正常的导入&#xff0c;说明安装OK&#xf…
阅读更多...
Java码农的福音：再也不怕乱码了

Java码农的福音：再也不怕乱码了

即便是Java这样成熟的语言&#xff0c;开发者们也常常会遇到一个恼人的问题——乱码。 本文将深入探讨乱码的根本原因&#xff0c;并针对Java开发中的乱码场景提出有效的解决方案&#xff0c;辅以实战代码&#xff0c;让Java程序员从此告别乱码困扰。 一&#xff0c;字符集的…
阅读更多...
SVDD（Singing Voice Deepfake Detection，歌声深度伪造检测）挑战2024

SVDD（Singing Voice Deepfake Detection，歌声深度伪造检测）挑战2024

随着AI生成的歌声快速进步&#xff0c;现在能够逼真地模仿自然人类的歌声并与乐谱无缝对接&#xff0c;这引起了艺术家和音乐产业的高度关注。歌声与说话声不同&#xff0c;由于其音乐性质和强烈的背景音乐存在&#xff0c;检测伪造的歌声成为了一个特殊的领域。 SVDD挑战是首个…
阅读更多...
机器学习笔记 KAN网络架构简述（Kolmogorov-Arnold Networks）

机器学习笔记 KAN网络架构简述（Kolmogorov-Arnold Networks）

一、简述 在最近的研究中，出现了号称传统多层感知器 (MLP) 的突破性替代方案，重塑了人工神经网络 (ANN) 的格局。这种创新架构被称为柯尔莫哥洛夫-阿诺德网络 (KAN)，它提出了一种受柯尔莫哥洛夫-阿诺德表示定理启发的函数逼近的方法。 与 MLP 不同，MLP 依赖于各个节…
阅读更多...
vs2019 c++里用 typeid() . name () 与 typeid() . raw_name () 测试数据类型的区别

vs2019 c++里用 typeid() . name () 与 typeid() . raw_name () 测试数据类型的区别

&#xff08;1&#xff09; 都知道&#xff0c;在 vs2019 里用 typeid 打印的类型不大准&#xff0c;会主动去掉一些修饰符&#xff0c; const 和引用 修饰符会被去掉。但也可以给咱们验证学到的代码知识提供一些参考。那么今天发现其还有 raw_name 成员函数&#xff0c;这个函…
阅读更多...
MySQL 进阶使用【函数、索引、视图、存储过程、存储函数、触发器】

MySQL 进阶使用【函数、索引、视图、存储过程、存储函数、触发器】

前言 做数仓开发离不开 SQL &#xff0c;写了很多 HQL 回头再看 MySQL 才发现&#xff0c;很多东西并不是 HQL 所独创的&#xff0c;而是几乎都来自于关系型数据库通用的 SQL&#xff1b;想到以后需要每天和数仓打交道&#xff0c;那么不管是 MySQL 还是 Oracle &#xff0c;都…
阅读更多...
uniapp + vue3 设置 axios proxy 代理，并重写路径

uniapp + vue3 设置 axios proxy 代理，并重写路径

uniapp vue2 设置代理如下&#xff1a; 已生成的项目架构里面找到manifest.json文件&#xff0c;通过源码视图的方式打开文件&#xff0c;在文件中添加一下代码即可完成代理&#xff1a; "h5": {"devServer": {"disableHostCheck": true, //禁…
阅读更多...
多区域OSPF路由配置

多区域OSPF路由配置

一、基础配置 1.搭建实验拓扑图 2.实验编址 具体如何配置可以看这一篇详细的博文&#xff1a;单区域OSPF实验-CSDN博客 3.分别检查六个路由器的配置&#xff1a; 使用命令display ip interface brief R1的配置 其他大家可以调出来&#xff0c;再与实验拓扑图进行比对&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023