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

news2025/3/1 8:52:25

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.coloradmin.cn/o/1681621.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

开源标注工具LabelMe的使用

开源标注工具LabelMe的使用

开源标注工具LabelMe使用Python实现&#xff0c;并使用Qt作为其图形界面&#xff0c;进行图像多边形标注。源码地址:https://github.com/labelmeai/labelme &#xff0c;最新发布版本为v5.4.1&#xff0c;它遵循GNU通用公共许可证的条款。 1.Features (1).多边形、矩形、圆形、…
阅读更多...
GDPU Java 天码行空12

GDPU Java 天码行空12

&#xff08;一&#xff09;实验目的 1、掌握JAVA中多线程的实现方法&#xff1b; 2、重点掌握多线程的同步与通信机制&#xff1b; 3、熟悉JAVA中有关多线程同步与通信的方法 &#xff1b; 4、能使用多线程机制解决实际应用中的线程同步与通信问题。 &#xff08;二&#xf…
阅读更多...
抖音小店有订单后怎么发货？实操分享！发货全流程来了

抖音小店有订单后怎么发货？实操分享！发货全流程来了

哈喽~我是电商月月 做无货源抖音小店的店铺在出单后怎么发货&#xff1f;今天我就来给大家解答这个问题&#xff0c;其中的注意事项新手商家可以收藏一下&#xff0c;避免犯错 抖音小店的商品出单后&#xff0c;商家在“管理中心-订单管理”页面就能看见所有待处理的订单 一…
阅读更多...
haddoop三大核心组件

haddoop三大核心组件

hadoop三大核心组件分别是hdfs、mapreduce和yarn。 1、hdfs&#xff1a;即分布式文件系统&#xff0c;用于存储hadoop集群中的大量数据。具有高容错性&#xff0c;可跨多个数据节点存储数据&#xff0c;并提供高吞吐量的数据访问&#xff1b; 2、mapreduce&#xff1a;用于大…
阅读更多...
羊大师：羊奶健康的成长伴侣

羊大师：羊奶健康的成长伴侣

羊大师&#xff1a;羊奶健康的成长伴侣 在追求健康生活的当下&#xff0c;越来越多的人开始关注饮食的营养与健康。羊大师发现在众多天然食品中&#xff0c;羊奶以其独特的营养价值和健康益处&#xff0c;逐渐成为了人们的新宠。特别是对于正在成长发育的孩子们来说&#xff0…
阅读更多...
数据结构与算法学习笔记十三---数组的顺序表示和实现(C语言)

数据结构与算法学习笔记十三---数组的顺序表示和实现(C语言)

目录 前言 一、什么是数组 二、数组的顺序存储 1.定义 2.初始化 3.销毁数组 4.获取指定下标的数据元素 5.给数组中的数据元素赋值 6.完整代码 前言 这篇文章主要介绍数组的顺序存储。 一、什么是数组 数组是由类型相同的数据元素构成的有序集合&#xff0c;每个元素成…
阅读更多...
【CTF Web】NSSCTF 3861 [LitCTF 2023]我Flag呢？Writeup（信息收集+源码泄漏+代码审计）

【CTF Web】NSSCTF 3861 [LitCTF 2023]我Flag呢？Writeup（信息收集+源码泄漏+代码审计）

[LitCTF 2023]我Flag呢&#xff1f; 奇怪&#xff0c;放哪里了&#xff0c;怎么看不见呢&#xff1f;&#xff08;初级难度&#xff09; 解法 按下 F12&#xff0c;打开开发者工具。找到 flag。 <!DOCTYPE html> <html><head><meta charset"utf-8&q…
阅读更多...
AI应用案例：吸烟打电话行为识别推理

AI应用案例：吸烟打电话行为识别推理

使用百度PaddlePaddle&#xff08;现更名为PaddlePaddle-GPU或PaddlePaddle-CPU&#xff09;框架来构建精准的人员抽烟、打电话动作识别模型&#xff0c;并将其应用于加油站监控场景&#xff0c;你可以遵循以下步骤&#xff1a; 数据准备&#xff1a; 收集抽烟和打电话行为的图…
阅读更多...
Originx的创新解法之：应用程序故障篇

Originx的创新解法之：应用程序故障篇

Originx并不期望做一个完整覆盖全栈的监控体系&#xff0c;而是利用北极星指标体系标准化找出故障方向&#xff0c;然后联动各种成熟的监控数据形成证据链条&#xff0c;并将各种数据融合在一个故障报告之中。更多信息请参考 Log | Metrics | Trace的联动方式探讨http://mp.wei…
阅读更多...
【半监督学习】半监督学习中的时间集合

【半监督学习】半监督学习中的时间集合

在本文中&#xff0c;我们提出了一种在半监督环境下训练深度神经网络的简单而高效的方法&#xff0c;在这种环境下&#xff0c;只有一小部分训练数据是有标签的。我们引入了self-ensembling技术&#xff0c;即利用网络在不同历时&#xff0c;最重要的是在不同正则化和输入增强条…
阅读更多...
Nginx part3 创建一个https的网站

Nginx part3 创建一个https的网站

目录 HTTPS 公钥和密钥 加密解密方式&#xff1a; https搭建步骤 强调一下 1、准备环境 2、配置文件 3、制作证书 4、进行设置 HTTPS 啥是https&#xff0c;根据百度&#xff1a;HTTPS &#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure&#xff09;&a…
阅读更多...
AI大语言模型在公共服务中的应用实例

AI大语言模型在公共服务中的应用实例

随着计算机技术的飞速发展&#xff0c;人工智能已经成为了当今科技领域的热门话题。从早期的图灵测试到现在的深度学习和神经网络&#xff0c;人工智能已经取得了令人瞩目的成就。特别是近年来&#xff0c;大数据、云计算、高性能计算等技术的发展为人工智能的研究提供了更加广…
阅读更多...
AI预测福彩3D采取887定位大底=23策略+杀断组+杀组选+杀和尾+杀和值012缩水测试5月16日预测第2弹

AI预测福彩3D采取887定位大底=23策略+杀断组+杀组选+杀和尾+杀和值012缩水测试5月16日预测第2弹

昨天的88723大底测试第一次测试&#xff0c;已经成功命中! 今天继续测试&#xff0c;仍旧目标为&#xff1a;10期中至少5中期。好了&#xff0c;废话不多说了&#xff0c;直接上结果吧~ 首先&#xff0c;887定位如下&#xff1a; 百位&#xff1a;5,7,6,4,2,9,0,1…
阅读更多...
玩转Matlab-Simscape（初级）- 08 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真（案例实战）

玩转Matlab-Simscape（初级）- 08 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真（案例实战）

** 玩转Matlab-Simscape&#xff08;初级&#xff09;- 08 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真&#xff08;案例实战&#xff09; ** 目录 玩转Matlab-Simscape&#xff08;初级&#xff09;- 08 - 基于Solidworks、Matlab Simulink、COMSOL的协同仿真&…
阅读更多...
信息安全相关内容

信息安全相关内容

信息安全 安全防护体系 安全保护等级 安全防护策略 安全技术基础 安全防护体系 安全防护体系有7个等级 安全保护等级 安全保护等级有5个等级，从上到下是越来越安全的用户自主其实就是用户自己本身具有的相应的能力 安全防护策略 安全策略是对抗攻击的主要策略安全日志： …
阅读更多...
（论文笔记）TABDDPM：使用扩散模型对表格数据进行建模

（论文笔记）TABDDPM：使用扩散模型对表格数据进行建模

了解diffusion model&#xff1a;什么是diffusion model? 它为什么好用&#xff1f; - 知乎 摘要 去噪扩散概率模型目前正成为许多重要数据模式生成建模的主要范式。扩散模型在计算机视觉社区中最为流行&#xff0c;最近也在其他领域引起了一些关注&#xff0c;包括语音、NLP…
阅读更多...
Spring Security实现用户认证一：简单示例

Spring Security实现用户认证一：简单示例

Spring Security实现用户认证一&#xff1a;简单示例 1 原理1.1 用户认证怎么进行和保存的&#xff1f;认证流程SecurityContext保存 2 创建简单的登录认证示例2.1 pom.xml依赖添加2.2 application.yaml配置2.3 创建WebSecurityConfig配置类2.4 测试 1 原理 Spring Security是…
阅读更多...
全栈式数据统计:Flask+Pandas按年,季度,月统计显示

全栈式数据统计:Flask+Pandas按年,季度,月统计显示

话不多说,有图有源码 1.实现效果: 按季度统计 按月度统计: 2.实现源码: 2.1)test_pandashtml.py from flask import Flask, render_template import pandas as pdapp Flask(__name__)# 自定义千分位格式化函数 def format_thousands(x):return f{x:,.2f}app.route(/) def …
阅读更多...
JVS物联网模拟点位：如何配置并自动生成点位数据全教程

JVS物联网模拟点位：如何配置并自动生成点位数据全教程

模拟点位 功能描述 模拟点位常用于业务的调试或数据展示&#xff0c;通过配置对应点位实现自动生成点位数据的功能。 界面操作 如下图所示&#xff0c;从模拟点位菜单进入模拟点位管理界面 模拟点位新增 点击新增按钮&#xff0c;如下图所示&#xff1a; ①&#xff1a;用户…
阅读更多...
一键解锁！贸易行业实现银行与财务系统秒级对接，效率飙升！

一键解锁！贸易行业实现银行与财务系统秒级对接，效率飙升！

客户介绍 某贸易有限公司是一家实力雄厚的工贸一体跨国集团企业。作为行业内的佼佼者&#xff0c;该公司以出口家纺产品和生产销售建材洁具为核心业务。公司始终坚持以市场为导向&#xff0c;不断创新和优化产品和服务&#xff0c;以满足不断变化的市场需求。 客户痛点 以往&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023