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 水平导航栏

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Node.js基础：从入门到实战

Node.js基础：从入门到实战

初识 Node.js 与内置模块 &#xff08;初识&#xff09; 1、知道什么是node.js 2、知道node.js可以做什么 3、node.js 中js的组成部分 &#xff08;内置模块&#xff09; 4、用 fs 模块读写操作文件 5、使用 path 模块处理路径 6、使用http 模块写一个基本的web服务器 初识 N…
阅读更多...
二．PVE创建 Ubuntu CT

二．PVE创建 Ubuntu CT

二&#xff0e;PVE创建 Ubuntu CT 浏览器地址栏输入访问pve系统的网址&#xff0c;利用web端进行管理。注意进入pve系统时默认显示的有访问地址。本步骤的web访问地址为&#xff1a;https://192.168.1.102:8006。 出现该页面&#xff0c;选择继续前往。 进入管理页面后&…
阅读更多...
图文成片剪辑软件，分享3个专业的工具！

图文成片剪辑软件，分享3个专业的工具！

在数字化时代&#xff0c;图文成片剪辑软件成为了我们创作与表达的重要工具。无论是想要制作一段引人入胜的短视频&#xff0c;还是打造一幅精美的图文海报&#xff0c;这些软件都能助你一臂之力。那么&#xff0c;图文成片剪辑软件的方法有哪些&#xff1f;又有哪些值得一试的…
阅读更多...
衡量代理IP的因素

衡量代理IP的因素

当你随便点开百度搜索IP代理&#xff0c;然后你就会看到&#xff0c;五花八门的IP代理商出现在视线中。再点进去链接&#xff0c;我们会发现&#xff0c;大多数IP代理商提供的基础IP服务都大差不差&#xff0c;东家这样说&#xff0c;西家又那样说&#xff0c;尽管我们看的头昏…
阅读更多...
三步在 vite 中配置 tailwindcss

三步在 vite 中配置 tailwindcss

前言 tailwindcss 是一个原子化的 css 工具&#xff0c;可以让你免于写 css&#xff0c;只写 html 即可原理&#xff1a;利用你写的 html 的 class 名称来生成 css 样式&#xff0c;理解为一个 postcss 插件或 loader 第一步&#xff1a;安装 tailwindcss npm i -D tailwind…
阅读更多...
JVM运行时内存:本地方法接口与本地方法栈

JVM运行时内存:本地方法接口与本地方法栈

文章目录 1. 什么是本地方法&#xff1f;2. 为什么要使用Native Method&#xff1f;3. 本地方法现状 运行时内存整体结构如下图所示: 1. 什么是本地方法&#xff1f; 简单地讲&#xff0c;一个Native Method就是一个Java调用非 Java 代码的接口。一个Native Method是这样一个 …
阅读更多...
GBDT调参--贝叶斯调参

GBDT调参--贝叶斯调参

随机抽特征和随机抽样本 n_estimators 是控制森林中树木的数量&#xff0c;即基评估器的数量。这个参数对随机森林模型的精确性影响是单调的&#xff0c;n_estimators越 大&#xff0c;模型的效果往往越好。但是相应的&#xff0c;任何模型都有决策边 n_estimators达到一定的程…
阅读更多...
【资源汇总】GIS/RS相关软件包+数据分享（直接获取附链接）

【资源汇总】GIS/RS相关软件包+数据分享（直接获取附链接）

01软件类 ArcGIS 10.2 链接&#xff1a;https://pan.baidu.com/s/1euHa3eTiaTjiOu-zxsi9eA?pwdnjov ArcGIS Pro 2.8.6 链接&#xff1a;https://pan.baidu.com/s/1Y3AQshCGL7tA1zdUc7s9PQ?pwdlkic ENVI 5.3 链接&#xff1a;https://pan.baidu.com/s/14k4IVlYIheNOr2to…
阅读更多...
520告白好物有哪些？收下这份清单不迷茫！

520告白好物有哪些？收下这份清单不迷茫！

在这个充满爱意的日子里&#xff0c;你是否正在为如何向心仪的人表达深情而犯愁&#xff1f;别担心&#xff0c;我们为你精心准备了一份520告白好物清单都是一些实用的礼品&#xff0c;为你提供多样化的选择&#xff0c;助你轻松传达爱意&#xff0c;让告白不再迷茫。快来看看吧…
阅读更多...
网页设计web

网页设计web

效果图代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><style>* …
阅读更多...
opencv4.8.0 GPU版本各平台编译

opencv4.8.0 GPU版本各平台编译

一、opencv4.8.0 ubuntu22.04上编译&#xff1a; 用cmake进行编译,需要配置三次。选中world选项&#xff0c;输入opencv_contrib_module路径。 ubuntu22.04上编译&#xff1a; cmake \ -D CMAKE_BUILD_TYPERELEASE \ -D CMAKE_INSTALL_PREFIX/usr/local \ -D BUILD_opencv_p…
阅读更多...
HR人才测评：督导能力与岗位胜任力测评

HR人才测评：督导能力与岗位胜任力测评

督导能力指的是什么&#xff1f; 督导能力指的是为了实现某一种目标&#xff0c;不管是客户的利益还是组织的利益&#xff0c;在必要的时候引导他人的行为。对于企业而言&#xff0c;有督导能力的人可以指引企业更好的前进&#xff0c;他们代表的是标准&#xff0c;代表的是榜样…
阅读更多...
策略模式详解

策略模式详解

策略模式 1 概述 先看下面的图片&#xff0c;我们去旅游选择出行模式有很多种&#xff0c;可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿&#xff0c;开发需要选择一款开发工具&#xff0c;当然可以进行代码开发的工具有很多&#xff0c;可以选择Idea进…
阅读更多...
sqlserver正确配置

sqlserver正确配置

一、启动sql server 服务&#xff0c;右键–>启动 二、设置网络协议 三、启动sa用户 1.使用windows用户验证登录Studio工具 2.选择安全性–>登录名–>sa, 右键选择属性 3.设置服务器身份验证模式 4.导入数据库文件
阅读更多...
在面对各种问题时，我们应该如何进行数据分析

在面对各种问题时，我们应该如何进行数据分析

python数据分析汇总 前言一、对比分析概念特征类型案例Matplotlib的颜色字母对照表解决遇到未知函数 二、相关性分析概念类型案例一案例二 三、时间序列分析概念类型案例 四、回归分析概念类型案例一案例二案例三 五、决策树概念计算过程案例 六、主成分分析概念计算过程案例 七…
阅读更多...
【会议征稿，ACM出版】第四届人工智能，大数据与算法国际学术会议 (CAIBDA 2024, 7/5-7)

【会议征稿，ACM出版】第四届人工智能，大数据与算法国际学术会议 (CAIBDA 2024, 7/5-7)

由河南省科学院、河南大学主办&#xff0c;河南省科学院智慧创制研究所、河南大学学术发展部、河南大学人工智能学院承办的第四届人工智能&#xff0c;大数据与算法国际学术会议 (CAIBDA 2024)将于2024年7月5-7日于中国郑州隆重举行。CAIBDA 2024致力于为人工智能&#xff0c;大…
阅读更多...
数据库设计大题详解

数据库设计大题详解

大题一&#xff1a;画E-R图&#xff08;概念结构设计&#xff09; 实体就是具体的物品&#xff0c;关系就是实体之间的关系&#xff0c;属性就是特征&#xff0c;内涵的意思 简单的小栗子&#xff1a; 1对1&#xff0c;1对n&#xff0c;n对m&#xff0c;自己考虑两者存在这个关…
阅读更多...
ubuntu虚拟机的 网卡不见了?

ubuntu虚拟机的 网卡不见了?

通过 ifconfig 命令查找不到自己的虚拟机上网网卡了,虚拟机的上网网卡名字是ens33 发现只有一个本地回环地址 执行如下两条指令可恢复网卡 sudo dhclient ens33#获取ip sudo ifconfig ens33#查看ip 再次通过ifconfig查看网卡信息
阅读更多...
HP5V80、HP5V105、HP3V28电比例驱动柱塞泵放大器

HP5V80、HP5V105、HP3V28电比例驱动柱塞泵放大器

HP5V80、HP5V105、HP3V28、HP3V45、HP3V60、HP3V80、HP3V125、HP3V140带电比例控制泵放大器&#xff0c;变排量泵的排量可通过由BEUEC比例放大器输出到比例电磁阀电流变化而进行调整&#xff0c;控制电流范围为300mA至800mA(24VDC)或600mA至1600mA(12VDC)。主要适合应用于工程机…
阅读更多...
植物大战僵尸杂交版（含下载方式）

植物大战僵尸杂交版（含下载方式）

最近时间&#xff0c;一款很火的植物大战僵尸杂交版火爆出圈&#xff0c;在玩家之间疯狂扩散。各种奇特的杂交组合让游戏变得更加有趣。 游戏介绍 植物大战僵尸杂交版是一款将《植物大战僵尸》和植物杂交概念结合在一起的独特塔防策略游戏。它将《植物大战僵尸》中的植物与进行…
阅读更多...
最新文章

Copyright @ 2022~2023