HTML+CSS基础用法介绍四

news2024/11/16 12:38:32

目录：

  • 复合选择器
    • 后代选择器
    • 子代选择器
    • 并集选择器
    • 交集选择器(了解)
    • 伪类选择器
  • CSS的特性
    • 继承性
    • 层叠性
  • 快捷键写法
  • 背景属性
  • 显示模式
  • 综合案列1：热词
  • 综合案列2：界面

🐎正片开始

后代选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。
作用：更准确，更高效，的选择目标元素(标签)

后代选择器写法：父选择器 子选择器{CSS的属性}，父子选择器之间用空格隔开。

看看如下代码如果我们想要让<div>内的所有<p>标签都获得想同的属性，并且不让<div>外面的<p>标签发生变化，该怎么办？难道用类标签一个一个在<div>内的 <p>中写<p class="类名"> 内容 </p>,这样写会不会太麻烦了，此时后代选择器不就派上用场了。

<body>
   <p>我是在外面的p标签</p>
   <div>
        <p>我是div的儿子标签，我叫div_p</p>
        <span>
            <p>我是div的孙子标签，我叫div_pp</p>
            ........省略多个p标签
        </span>
    </div>
</body>

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
   <p>我是在外面的p标签</p>
   <div>
        <p>我是div的儿子标签，我叫div_p</p>
        <span>
            <p>我是div的孙子标签，我叫div_pp</p>
        </span>
    </div>
</body>
</html>

效果展示
在这里插入图片描述
在上述代码中我写了一个后代选择器如下

 <style>
        div p{
            color: red;
        }
    </style>

将<div>标签嵌套的所有<p>标签文字设置成了红色。

子代选择器

子代选择器写法：父选择器>子选择器{CSS的属性}，父子选择器之间用>隔开。

给出下面一份代码

<body>
   <p>我是在外面的p标签</p>
   <div>
        <p>我是div的儿子标签，我叫div_p</p>
        <span>
            <p>我是div的孙子标签，我叫div_pp</p>
        </span>
    </div>

前面我们介绍了后代选择器，是将<div>标签下的儿子<p>标签和 <span> 下的<p> 标签都获得了相同的属性，此时，我只想让父标签<div>下的儿子标签<p>标签获得属性该怎么做呢？那就需要用到我们的子代选择器了。

子代选择器的写法如下

 <style>
     父选择器>子选择器{
            css的属性
        }
</style>

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p{
            color: red;
        }
    </style>
</head>
<body>
   <p>我是在外面的p标签</p>
   <div>
        <p>我是div的儿子标签，我叫div_p1</p>
        <p>我是div的儿子标签，我叫div_p2</p>
        <p>我是div的儿子标签，我叫div_p3</p>
        <span>
            <p>我是div的孙子标签，我叫div_pp</p>
        </span>
    </div>
</body>
</html>

效果展示在这里插入图片描述
在上述代码中我写了子代选择器如下

    <style>
        div>p{
            color: red;
        }
    </style>

是将<div> 标签下的所有儿子<p>标签中文字设置为红色，而<div>标签下的孙子标签，重孙子<p> 标签都不会被影响到 。

并集选择器

并集选择器的重用：选中多组标签设置相同的样式。
选择器的写法：选择器1，选择器，选择器3，选择器N{CSS的属性}，选择器之间用逗号隔开。

应用场景：当多个标签都需要的属性相同时就可以用并集选择器达成目的。

用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span{
            color: red;
        }
    </style>
</head>
<body>
    <p>我是p标签</p>
    <div>我是div标签</div>
    <span>我是span标签</span>
    <h1>我是主要标签</h1>
</body>
</html>

效果展示
在这里插入图片描述

<p>，<div>，<span>，标签都获得了相同的属性，只有<h1>标签没有变为红色，因为在上面选择器中并没有并上<h1> 标签

交集选择器

交集选择器：选中同时满足多个条件的元素。

选择器写法：选择器1选择器2…选择器N{CSS的属性}，选择器之间连写，没有任何符号。

注意：但选择器中有标签选择器时需要写在最前面。

如下代码我选择的是<p>标签和类标签组合的交集选择器

    <style>
        p.box{
            color: red;
        }
    </style>

<body> 标签内代码如下

<body>
    <p class="box">p标签，使用了类选择器 box</p>
    <p>p标签</p>
    <div class="box">div 标签，使用了类选择器box</div>
</body>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=pp, initial-scale=1.0">
    <title>Document</title>
    <style>
        p.box{
            color: red; /*红色*/
        }
    </style>
</head>
<body>
    <p class="box">p标签，使用了类选择器 box</p>
    <p>p标签</p>
    <div class="box">div 标签，使用了类选择器box</div>
</body>
</html>

效果展示
在这里插入图片描述

上述代码中我选择的是<p>和.box组合的交集选择器，所以只有同时满足有<p>标签的同时还使用了box。

伪类选择器

伪类选择器有以下几种：

选择器作用
选择器:link访问前显示该选择器的属性
选择器:visited访问后显示该选择器的属性
选择器:hover鼠标悬停时显示选择器的属性
选择器:active点击时显示该选择器的属性

注意：伪类选择器主要用于超链接

接下来对这四种选择器逐一介绍

  1. 选择器:link的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test:link{
            color: red;  /*红色*/
        }
    </style>
</head>
<body>
    <a href="#" class="test">我是超链接1，访问前我是红色，点击后我变为原色</a>
</body>
</html>

效果展示（访问前）
在这里插入图片描述
当点击后变为原来超链接颜色（访问后）
在这里插入图片描述

  1. 选择器:visited的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test:link{
            color: red; /*红色*/
        }
        .test:visited{
            color: green; /*绿色*/
        }
    </style>
</head>
<body>
    <a href="#" class="test">我是超链接1，访问前我是红色，访问后我变为绿色</a>
</body>
</html>

效果展示图（访问前）
在这里插入图片描述

访问后
在这里插入图片描述

  1. 选择器:hover的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test:hover{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="#" class="test">我是超链接1，悬停前我是原色，悬停后我变为蓝色</a>
</body>
</html>

悬停前效果图
在这里插入图片描述

悬停后效果图
在这里插入图片描述

  1. 选择器:active的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .test:active{
            color: pink;
        }
    </style>
</head>
<body>
    <a href="#" class="test">我是超链接1，鼠标左键没一直按下时我是原色，长按时我变为粉色</a>
</body>
</html>

鼠标左键没点击前效果图
在这里插入图片描述
左键一直点击后效果图
在这里插入图片描述

继承性

继承性：子级标签默认继承父级标签的文字属性。

文字属性有如下
在这里插入图片描述

继承用法代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            color: red;
            font-size: 32px;
        }
    </style>
</head>
<body>
    <p>我是p标签</p>
    <div>我是div标签</div>
    <div><span>我是span标签</span></div>
    <a href="#">我是超链接</a>
    <h1>我是h1标签</h1>
</body>
</html>

效果图
在这里插入图片描述
注意： 在继承中，当子标签有文字属性，则会用自己的文字属性，没有的才会继承父标签的文字属性，例如上面的<a>标签，本身就有文字是蓝色的属性，所以它不会继承父亲的红色，只会继承没有的字号；还有上面的<h1>标签也是它本身有字号属性，但没有颜色属性，所以就继承了父亲的红色。

层叠性

特点：

  • 相同的属性会覆盖：后面的CSS属性会覆盖前面的CSS属性
  • 不同的属性会叠加：不同的CSS属性低频生效

层叠性用法如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color:red;
            font-size: 32px;
        }
        p{
            color: blue;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <p>我是P标签</p>
</body>
</html>

可以看见我写了两个<p>选择器，如果这两个选择器有相同的属性则后面的属性会覆盖前面的属性，不同的属性则会叠加，所以下面我们应该看见的现象是<p> 标签中的子变大为32px,并且加粗了，由于后面覆盖前面的相同属性所以最终为蓝色

效果如下
在这里插入图片描述

快捷键

在VS Code中输入缩写会自动生成对应的代码
输入对应的缩写，生成对应的标签，整理成了表格如下

缩写标签说明
div.box<div class="box"></div>生成使用类的标签
div#box<div id="box"></div>生成使用id的标签
div+p<div></div><p></p>生成同级标签
div>p<div><p></p></div>生成父子级标签
span*3<span></span><span></span><span></span>生成多个相同的同级标签
div{内容}<div>内容</div>生成有内容的标签

CSS中属性的简写如下↓

w回车 = => width:;
h回车 = = > height:;
w500回车 = => width:500px;
h500回车 = => height:500px;
bgc+回车 = => background-color: #fff;
w500+h500+bgc回车 = => height: 500px; width: 500px; background-color: #fff;

背景属性

接下来我们将介绍一下背景属性

背景属性都有哪些呢？我将常用的背景属性都整理成了表格如下

属性说明
background-color背景色
background-image背景图
background-repeat背景图平铺方式
background-position背景图位置
background-size背景图缩放
background-attachment背景图固定
background背景复合属性

接下来对上面属性逐一介绍以及使用

由于颜色在前面章节以及介绍过了，本节就不介绍了，有不懂的小伙伴可以看看前面章节的博客,点击background-color即可跳转过去

1.background-image 的使用

属性值有url(图片路径);

代码使用如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 400px;
            height: 526px;
            background-image: url(./dm.jpg);
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述

可以发现我明明只用了一张背景图为啥给我来了四份，在浏览器中如果背景图大小不能占满则会赋值这张图片将其余空位填满，因为我刚好将 <div> 标签的宽高设置成了图片的宽和高的2倍，所以就看见了上面填充四张图片的效果，这其实是平铺带来的效果。如果有时不想要这种效果该怎么办呢？是否有办法取消？那就得看看下面介绍的属性了。

  1. background-repeat的使用

属性值如下

属性值作用
no-repeat不平铺
repeat平铺(默认效果)
repeat-x水平方向平铺
repeat-y垂直方向平铺

接下来对逐一使用一下（repeat不介绍）

  1. no-repeat的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 400px;
            height: 526px;
            background-image: url(./dm.jpg);
            background-color: pink;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果展示
在这里插入图片描述
不平铺则只会显示一张，不会复制该图片去填充其他空位了。

  1. repeat-x的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 400px;
            height: 526px;
            background-image: url(./dm.jpg);
            background-color: pink;
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
水平平铺则是水平方向如果有空位则去复制该图片去填充。

  1. repeat-y的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        div {
            width: 400px;
            height: 526px;
            background-image: url(./dm.jpg);
            background-color: pink;
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
垂直方向有空位则复制图片填充垂直空位

  1. background-position的使用

属性值：水平方向位置 垂直方向位置

关键字

关键字位置
left左侧
right右侧
center居中
top顶部
bottom底部

坐标表示：坐标(数字+px,正负都可以)

给 background-position属性赋值可以有以下几种情况

    <style>
        div{
            /*如果两个位置都是关键字，则无需考虑水平位置，和垂直位置*/
            background-position: right center;  /* 等同于background-position: center right;*/
            /*像素表示坐标（正负都可以）*/
            background-position: 100px -100px;
            /*数字与关键字混用*/
            background-position: 100px center;
        }
    </style>

也有赋值一个的情况如下

  1. 只给background-position属性赋值一个值时，并且是数字+px
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color:pink;
            background-image: url(./dm.jpg);
            background-repeat: no-repeat;
            background-position:100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述
background-position被赋值一个像素值(数字+px)时默认是设置了水平坐标，向右边偏移了100px,则垂直方向会被默认居中

  1. 只给background-position属性赋值一个值时，并且是关键字
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{

            width: 500px;
            height: 500px;
            background-color:pink;
            background-image: url(./dm.jpg);
            background-repeat: no-repeat;/*设置了水平方向*/
            background-position:right;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述
当是关键字时某一个方向被设置了，另一个方向这是居中

  1. background-size属性的使用

作用：设置背景图大小

常用属性值：

  • 关键字
    • cover：等比例缩放背景图片直到图片完全覆盖背景区，可能会导致背景图部分看不见
    • contain：等比例缩放背景图片，当背景图的宽或者高等于了背景区的宽或者高时，就停止缩放，可能会导致背景区部分有空白(未被背景图占用)。
  • 百分比：根据盒子尺寸计算图片大小
  • 数字+单位(px) 不常用
  1. 属性值cover的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height:400px;
            background-color:pink;
            background-image: url(./dm.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图
在这里插入图片描述

可以看见cover属性值导致图片完全覆盖了背景区，导致背景图部分无法看见。

  1. 属性值contain的使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 600px;
            height:400px;
            background-color:pink;
            background-image: url(./dm.jpg);
            background-repeat: no-repeat;
            background-size: contain;
        }
        
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图

在这里插入图片描述

可以看见contain属性值按照等比例缩放到高度与背景区高度一致时则不继续缩放。

  1. background-attachment属性的使用

当我们设置了背景图时，并且背景图上面的文字显示行数过多了，超过了本界面所承受的行数，需要滑动滚轮查看下面行的文字时，在滑动滚轮的同时不希望背景图片跟着动，则这时候就需要固定背景图片

固定背景图的属性值是：fixed

当我们不固定背景图片的场景

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url(./a.jpg);
            background-repeat: no-repeat;
            background-size: 1550px 830px;
            line-height: 64px;
            
        }
    </style>
</head>
<body>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
</body>
</html>

没滑动滚轮时的效果图

在这里插入图片描述
滑动时背景图也跟着动了，很明显这种效果不好
在这里插入图片描述
当固定背景图代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url(./a.jpg);
            background-repeat: no-repeat;
            background-size: 1550px 830px;
            line-height: 64px;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
   <div>测试鼠标滚轮滚动，背景图片是否一起滚动</div>
</body>
</html>

效果图
在这里插入图片描述
如上我已经滑到最底部了此时背景图没有跟着动，已经固定住了。

  1. background属性介绍

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定 (空格隔开各个属性值，不区分顺序)

作用：简化了代码。

写法如下

  background:red url(图片路径) no-repeat center top/contain;

显示模式

块级：独占一行，宽高属性生效，默认宽度是父级的100%。

行内：一行共存多个，宽高属性不生效，宽高由内容撑开。

行内块：一行共存多个，宽高属性生效，宽高默认由内容撑开。4

显示模式转换

属性名：display

属性值：如下↓

属性值效果
block块级
inline-block行内块
inline行内

综合案例1:热词

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热词</title>
    <style>
        a{
            width: 200px;
            height: 80px;
            display: block;
            background-color: #3064bb;
            text-align: center;
            line-height: 80px;
            color: #fff;
            text-decoration: none;
            font-size: 18px;
        }
        a:hover{
            background-color: #608dd9;
        }
    </style>
</head>

<body>
    <a href="https://baike.baidu.com/item/HTML/97049?fr=ge_ala">HTML</a>
    <a href="https://baike.baidu.com/item/CSS/5483256?fr=ge_ala">CSS</a>
    <a href="https://baike.baidu.com/item/JavaScript/321142?fr=ge_ala">JavaScript</a>
    <a href="https://baike.baidu.com/item/Vue.js/19884851?fr=ge_ala">Vue</a>
    <a href="https://baike.baidu.com/item/react/18077599?fr=aladdin">React</a>
</body>
</html>

效果展示

在这里插入图片描述

综合案例2：界面

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            text-align: right;
            color: #333;
            font-size: 20px;
        }
        div{
            height: 500px;
            background-color: #f3f3f4;
            background-image: url(1.png);
            background-size: contain;
            background-repeat: no-repeat;
        }
        div h2{
            font-size: 36px;
            line-height: 100px;
            font-weight: 300;
        }
        div a{
            display: inline-block;
            color: #fff;
            width: 125px;
            height: 40px;
            background-color: #f06b1f;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            font-weight: 700;
        }

        div a:hover{
            color: #ff0000eb;
        }

    </style>
</head>
<body>
    <div>
        <h2>让创造产生价值</h2>
        <p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
        <a href="#">我要报名</a>
       
    </div>
</body>
</html>

效果展示

在这里插入图片描述

完结🎉🎉🎉

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

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

相关文章

代码的艺术之路——创建型设计模式

代码的艺术之路——创建型设计模式

微信公众号&#xff1a;牛奶 Yoka 的小屋 有任何问题。欢迎来撩~ 最近更新&#xff1a;2024/10/02 [大家好&#xff0c;我是牛奶。] 我们所写的每一行代码&#xff0c;说到底其实是对真实世界的每一处细节的映射。而设计模式&#xff0c;就是为了能更好的映射现实世界总结出的…
阅读更多...
[C++] 剖析AVL树功能的实现原理

[C++] 剖析AVL树功能的实现原理

文章目录 引言AVL树的关键性质为什么选择AVL树&#xff1f; AVL树的结构节点对象的类 AVL树的插入检查是否为空树并处理根节点查询插入位置&#xff08;非递归&#xff09;插入节点并连接父节点更新平衡因子&#xff08;在失去平衡的条件下进行旋转&#xff09; 旋转旋转的原则…
阅读更多...
Pycharm中文版百度云下载（附详细安装步骤）

Pycharm中文版百度云下载（附详细安装步骤）

很多刚入门Python的小伙伴可能会存在疑惑&#xff0c;PyCharm是什么&#xff1f;或是把Pycharm和Python搞混淆&#xff0c;以为二者是同一个概念。今天就与大家来聊聊PyCharm。 实际上&#xff0c;PyCharm是一款由JetBrains开发的集成开发环境 (IDE)&#xff0c;专门设计用于P…
阅读更多...
【cpp/c++ summary 工具】 vld（Visual Leak Detector）windows 内存泄漏检测工具

【cpp/c++ summary 工具】 vld（Visual Leak Detector）windows 内存泄漏检测工具

Visual Leak Detector&#xff0c;这是一个用于检测C/C程序内存泄漏的工具。它可以在开发Windows应用程序时发现并修复内存泄漏的问题。 安装VLD https://kinddragon.github.io/vld/https://github.com/KindDragon/vld 运行程序 在项目中包含头文件 项目中&#xff0c;通…
阅读更多...
Host文件及switchhosts for mac下载

Host文件及switchhosts for mac下载

一、概念 hosts 是一个文本文件&#xff0c;用来将主机名或域名映射到对应的 IP 地址。 这个文件通常位于 /etc/hosts&#xff08;在 Unix-like 系统上&#xff0c;包括 macOS 和 Linux&#xff09; 可以在终端输入sudo vim /etc/hosts来打开 或 C:\Windows\System32\driver…
阅读更多...
Web安全 - 路径穿越（Path Traversal）

Web安全 - 路径穿越（Path Traversal）

文章目录 OWASP 2023 TOP 10导图定义路径穿越的原理常见攻击目标防御措施输入验证和清理避免直接拼接用户输入最小化权限日志监控 ExampleCode漏洞代码&#xff1a;路径穿越攻击案例漏洞说明修复后的安全代码代码分析 其他不同文件系统下的路径穿越特性Windows系统类Unix系统&a…
阅读更多...
MDM监管锁系统ABM证书与MDM证书申请与使用

MDM监管锁系统ABM证书与MDM证书申请与使用

MDM证书与ABM证书申请与维护 基础知识 监管锁系统运行需要两个证书 分别为ABM证书 与 MDM证书,在别人平台购买的监管锁只会让你上传自己的ABM证书而MDM证书则是共用一个平台自己的MDM证书&#xff0c;而MDM证书才是控制手机的关键,如果MDM证书被封禁,那么所有的设备将无法受到…
阅读更多...
设置Android studio或者IEDA自动导包

设置Android studio或者IEDA自动导包

File --> Setting --> Editor --> Auto Import &#xff0c;如果是java&#xff0c;就把java对应的勾选上
阅读更多...
【JavaScript】Bit：组件驱动开发的新时代

【JavaScript】Bit：组件驱动开发的新时代

Bit 是一个现代化的开发工具&#xff0c;帮助开发者通过组件驱动的方式进行软件开发和协作。它旨在解决开发大型系统时的常见挑战&#xff0c;如组件的复用性、独立性和协作性问题。通过 Bit&#xff0c;开发团队可以更加轻松地共享、管理和维护可复用的代码组件&#xff0c;同…
阅读更多...
Mybatis-Flex使用

Mybatis-Flex使用

说明&#xff1a;MyBatis-Flex 是一个优雅的 MyBatis 增强框架&#xff0c;它非常轻量、同时拥有极高的性能与灵活性。我们可以轻松的使用 Mybaits-Flex 链接任何数据库&#xff0c;其内置的 QueryWrapper^亮点 帮助我们极大的减少了 SQL 编写的工作的同时&#xff0c;减少出错…
阅读更多...
JSR303微服务校验

JSR303微服务校验

一.创建idea 二.向pom.xml添加依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.7.RELEASE</version></parent><properties><java.vers…
阅读更多...
Linux内核对连接的组织和全连接队列

Linux内核对连接的组织和全连接队列

一、Linux内核的组织形式 1.1 描述“连接”的结构 TCP协议的特点是面向连接&#xff0c;一个服务端可能会被多个客户端连接&#xff0c;那这些连接也一定会被操作系统组织起来&#xff0c;接下来我们谈一谈在Linux内核中是如何管理这些连接的。 既然要管理这些连接&#xff0c…
阅读更多...
vue3 升级实战笔记

vue3 升级实战笔记

最近要将公司项目的移动端进行 vue3 的升级工作&#xff0c;就顺便记录下升级过程。 项目迁移的思路 我的想法是最小改动原则。 从 vue2.x 升级到 vue3&#xff0c;且使用 vue3 的 选项式 API。构建工具要从 vue-cli&#xff08;webpack&#xff09;升级到 vite。路由需要升级到…
阅读更多...
软件测试面试八股文（含答案+文档）

软件测试面试八股文（含答案+文档）

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 Part1 1、你的测试职业发展是什么&#xff1f; 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师…
阅读更多...
17.反射与动态代理

17.反射与动态代理

目录 1.反射的概述 2.学习反射到底学什么&#xff1f; 3.字节码文件和字节码文件对象 4.获取字节码文件对象的三种方式 5.Class类中用于获取构造方法的方法 6.Class类中用于获取成员变量的方法 7.Class类中用于获取成员方法的方法 8.反射和配置文件结合动态获取的练习与利用反…
阅读更多...
企业在数字化转型过程中如何确保数据安全性？

企业在数字化转型过程中如何确保数据安全性？

在数字化转型过程中&#xff0c;确保数据安全性是至关重要的。以下是一些关键措施&#xff0c;可以帮助企业在数字化转型中保障数据安全&#xff1a; 一、建立健全数据安全管理体系 制定完善的数据安全政策、制度和流程&#xff1a;明确数据安全管理的责任部门和人员&#xff…
阅读更多...
stm32四足机器人(标准库)

stm32四足机器人(标准库)

项目技术要求 PWM波形的学习 参考文章stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)_ttl pwm 驱动激光头区别-CSDN博客 舵机的学习 参考文章 stm32 TIM输出比较(PWM驱动LED呼吸灯&&PWM驱动舵机&&PWM驱动直流电机)…
阅读更多...
前端学习第一天笔记 HTML5 CSS初学以及VSCODE中的常用快捷键

前端学习第一天笔记 HTML5 CSS初学以及VSCODE中的常用快捷键

前端学习笔记 VsCode常用快捷键列表HTML5标题标签标签之段落、换行、水平线标签之图片图片路径详解标签之超文本链接标签之文本列表标签之有序列表列表标签之无序列表标签之表格表格之合并单元格Form表单表单元素文本框 密码框 块元素与行内元素&#xff08;内联元素&#xff0…
阅读更多...
【09】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Class类基础全解（属性、方法、继承复用、判断）

【09】纯血鸿蒙HarmonyOS NEXT星河版开发0基础学习笔记-Class类基础全解（属性、方法、继承复用、判断）

序言&#xff1a; 本文详细讲解了关于我们在程序设计中所用到的class类的各种参数及语法。 笔者也是跟着B站黑马的课程一步步学习&#xff0c;学习的过程中添加部分自己的想法整理为笔记分享出来&#xff0c;如有代码错误或笔误&#xff0c;欢迎指正。 B站黑马的课程链接&am…
阅读更多...
横排文字、图层蒙版-1(2024年09月30日)

横排文字、图层蒙版-1(2024年09月30日)

2024年09月30日 记录_导读 2024年09月30日 10:13 关键词 优惠券 设计 图层 背景 元素 调整 画笔工具 颜色 大小 位置 复制 移动 添加涂层 多选 显示 PS 元素文件 隐藏 使用规则 Logo 全文摘要 通过在Photoshop中精心操作图层&#xff0c;包括复制、移动和调整设置&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023