Web前端一套全部清晰 ⑥ day4 CSS.2 复合选择器、CSS特性、背景属性、标签的显示模式

别人的议论，那是别人的，你的人生，才是你的

                                                                —— 24.5.7

一、复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确、更高效的选择目标元素（标签）

1.后代选择器

后代选择器：选中某元素的后代元素

选择器写法：父选择器、子选择器（CSS属性），父子选择器之间用空格隔开

后代选择器包含后代的所有，包含儿子、孙子、重孙子

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>/* div 里面的 span 文字颜色是红色 */div span {color:aquamarine;}</style>
</head>
<body><span>span 标签</span><div><span>这个是div的儿子span</span><p><span>这个是div的孙子span</span></p></div>
</body>
</html>

2.子代选择器

子代选择器:选中某元素的子代元素(最近的子级)

选择器写法:父选择器 > 子选择器{CSS 属性}，父子选择器之间用 > 隔开

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>子代选择器</title><style>/* div 的儿子 span 文字颜色是红色 */div > span {color: red;}</style>
</head>
<body><div><span>儿子 span</span><p><span>孙子 span</span></p></div>
</body>
</html>

3.并集选择器

并集选择器：选中多组标签设置相同的样式，

选择器写法：选择器1,选择器2,…, 选择器N {CSS 属性}，选择器之间用，隔开。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>/* div p span 颜色是红色 */div,p,span {color:red;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><span>span 标签</span>
</body>
</html>

4.交集选择器（了解）

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

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

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</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>

5.伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器：hover{CSS 属性}

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类选择器</title><style>a:hover {color: brown;}/* 任何标签都可以设置鼠标悬停的状态 */.box:hover {color: greenyellow;}p:hover {color: aqua;}</style>
</head>
<body><a href="#">a 标签，超链接</a><div class="box">div标签</div><p>一切都会好的</p>
</body>
</html>

伪类 — 超链接

超链接一共有四个状态

 选择器                 作用

  :link                   访问前
  :visited              访问后
  :hover               鼠标悬停
  :active              点击时(激活)

提示：如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>超链接标签</title><style>/*a:link {color:red;}a:visited{color: green;}a:hover{color:blue;}a:active{color:cadetblue;}*//* 工作中，一个 a 标签选择器设置超链接的样式，hover状态特殊位置 */a{color:red;}a:hover{color:green;}</style>
</head>
<body><a href="#">a 标签，测试伪类</a>
</body>
</html>

二、CSS 特性

CSS特性：

        化简代码 / 定位问题，并解决问题

继承性

          继承性：子级默认继承父级的文字控制属性

          当标签有自己的属性，则会使用自己的属性，不需要继承

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-继承性</title><style>body{font-size: 30px;color: green;font-weight: 700;}</style>
</head>
<body><div>div 标签</div><p>p 标签</p><span>span 标签</span><!-- 如果标签自己有样式，则生效自己的，不继承，超链接默认是蓝的，所以不用继承 --><a href="#">a 标签</a><h1>h1 标签</h1>
</body>
</html>

层叠性

特点:

相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性

不同的属性会叠加:不同的 CSS 属性都生效

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS特性-层叠性</title><style>/* 覆盖 叠加 */div{color: red;font-weight: 700;}/* 想要生效的相同属性放在后面 */div{color:green;font-size: 30px;}</style>
</head>
<body><div>div标签</div>
</body>
</html>


优先级

优先级:

        也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则:

        选择器优先级高的样式生效

公式:

        通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important>选择器选中标签的范围越大，优先级/权重越低

        （选中标签的范围越大，优先级/权重越低）

!important 是一个提权功能，提高权重/优先级到 最高，慎用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>特性-优先级</title><style>*{/* !important 是一个提权功能，提高权重/优先级到 最高，慎用 */color:aquamarine !important;}div{color:red;}.box{color: blue;}#test{color:orange;}</style>
</head>
<body><div class="box" id="test" style="color:purple">div 标签</div>
</body>
</html>

优先级-叠加计算规则

叠加计算

        叠加计算:如果是复合选择器，则需要权重叠加计算。公式:(每一级之间不存在进位)
(行内样式，id选择器个数，类选择器个数，标签选择器个数)

规则:

        ① 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
        ② !important 权重最高
        ③ 继承权重最低

题1

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重叠加1</title><style>/* 行内样式为0 id选择器为0 类选择器为2 标签选择器为1*/.c1 .c2 div{color: blue;}/* 行内样式为0 id选择器为1 类选择器为0 标签选择器为1*/div #box3{color: green;}/* 行内样式为0 id选择器为1 类选择器为1 标签选择器为0*//* 最终生效第三个 所以浏览器颜色是橙色 */#box1 .c3{color:orange;}</style>
</head>
<body><div id="box1" class="c1"><div id="box2" class="c2"><div id="box3" class="c3">这行文本是什么颜色的？</div></div></div>
</body>
</html>

题2

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重叠加2</title><style>div p{color:red;}.father{color: blue;}</style>
</head>
<body><div class="father"><p class="son">文字</p></div>
</body>
</html>

题3

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权重叠加3</title><style>/* 行内样式为0 id选择器为2 类选择器为0 标签选择器为0*/#father #son{color: blue;}/* 行内样式为0 id选择器为1 类选择器为1 标签选择器为1*/#father p.c2{color: black;}/* 行内样式为0 id选择器为0 类选择器为2 标签选择器为2*/div.c1 p.c2{color:red;}/* father是继承 所以即使有！important也排除 */#father{color:green !important;}div#father.c1{color:yellow;}</style>
</head>
<body><div id="father" class="c1"><p id="son" class="c2">这行文本是什么颜色？</p></div>
</body>
</html>

三、Emmet 写法

Emmet 写法

        Emmet写法:代码的简写方式，输入缩写 VS Code 会自动生成对应的代码

HTML：

        如下表所示

CSS:

        大多数简写方式为属性单词的首字母

四、背景属性

1.背景属性-拆分写法

背景图 background-image

网页中，使用背景图实现装饰性的图片效果

属性名:

        background-image(bgi)

属性值:

        url(背景图 URL)

div {width: 400px;height:400px;background-image:url(./images/1.png);
}
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图</title><style>/* 盒子是 400 * 400 */div {width: 400px;height: 400px;/* 背景图默认是平铺效果 盒子太大会默认复制 */background-image: url(./images/小猫.png);}</style>
</head>
<body><div>div标签</div>
</body>
</html>

背景图平铺方式 background-repeat

属性名：

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

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图平铺方式</title><style>div{width: 400px;height: 400px;background-color:  pink;background-image: url(./images/小猫.png);/* 不平铺：盒子的左上角显示一张背景图 */background-repeat: no-repeat;}</style>
</head>
<body><div> div标签</div>
</body>
</html>

背景图位置

属性名：

        background-position(bgp)

属性值：

        水平方向位置 垂直方向位置

        关键字
                关键字           位置
                 left                左侧
                 right              右侧
                 centei            居中
                 top                顶部
                 bottom          底部
        坐标(数字+px，正负都可以)

                水平:正数向右;负数向左
                垂直:正数向下;负数向上

div {width: 400px;height:400px;background-color: pink;background-image:url(./images/1.png)background-repeat:no-repeat;background-position:center bottom;background-position:50px -100px;background-position:50px center;
}
示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图位置</title><style>div{width: 400px;height: 400px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* 调整背景图位置 left左边 right右边 bottom底部 top首部*/background-position: right bottom;/* 也可以 符号 像素 0  *//* background-position: 50px 0;background-position: 100px 0;background-position: -100px 0;background-position: 0 100px;background-position: 0 -100px;background-position: 0 -50px; */}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

提示：

        关键字取值方式写法，可以颠倒取值顺序
        可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中

示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图位置</title><style>div{width: 400px;height: 400px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* 只写一个数字表示水平方向，垂直方向不写表示居中 */background-position: 30px;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

背景图缩放

        作用:

                设置背景图大小

        属性名:

                background-size(bgz)

        常用属性值:

                关键字
                        cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

                        contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白

                        百分比:根据盒子尺寸计算图片大小
                        数字+单位(例如:px)

        示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图缩放</title><style>div {width: 700px;height: 600px;background-color: pink;background-image: url(./images/小猫.png);background-repeat: no-repeat;/* contain等比例缩放，如果图的宽高跟盒子尺寸相等停止缩放，可能导致盒子有留白 *//* background-size: contain; *//* cover完全覆盖盒子，可能导致图片显示不全 *//* background-size: cover; *//* 取百分比的写法，可能导致图片显示不全，100%表示图片的宽度和盒子宽度一样，高度按照图片比例等比例缩放 */background-size: 85%;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

背景图固定 

        作用:

                背景不会随着元素的内容滚动。

        属性名:

                background-attachment(bga)

        属性值:

                fixed

body {background-image:url(./images/bg.jpg);    background-repeat:no-repeat;background-attachment:fixed;
}
        示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景图固定</title><style>body{background-image: url(./images/我始终相信.jpg);background-repeat: no-repeat;background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p><p>测试文字，撑开body，让浏览器有滚动条</p>
</body>
</html>

2.背景属性-复合属性

背景复合属性

        属性名:

                background(bg)

        属性值:

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

div {width: 400px;height:400px;background: pink url(./images/1.png) no-repeat right center/cover;
}
        示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>background属性</title><style>div {width: 600px;height: 600px;/* background: pink url(./images/我始终相信.jpg)no-repeat center bottom/cover; */background: pink url(./images/我始终相信.jpg)no-repeat center bottom/contain;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>

3.显示模式

        显示模式:标签(元素)的显示方式。

        作用:

                布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

        块级元素

                独占一行

                宽度默认是父级的100%

                添加宽高属性生效

        行内元素

                一行可以显示多个

                宽高尺寸由内容撑开
                设置宽高属性不生效

        行内块元素

                一行可以显示多个
                宽高尺寸也可以由内容撑开

                设置宽高属性生效

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式</title><style>/* 块级别元素：独占一行 块元素宽度默认是父级的100% 添加宽高属性生效 */div {width: 100px;height: 100px;}.div1{background-color: brown;}.div2{background-color: orange;}span{width: 200px;height: 200px;}.span1{background-color: brown;}.span2{background-color: orange;}/* 图片的宽高会生效 */img{width: 100px;height: 100px;}</style>
</head>
<body><!-- 块级别元素：独占一行 块元素宽度默认是父级的100% 添加宽高属性生效--><div class="div1">div1 标签1</div><div class="div2">div2 标签2</div><!-- 行内元素：一行可以共存多个：尺寸由内容撑开，价款高不生效 --><span class="span1">span111111111</span><span class="span2">span1</span><!-- 行内块元素：一行共存多个，默认尺寸由内容撑开，加宽高生效 --><img src="./images/我始终相信.jpg" alt=""><img src="./images/我始终相信.jpg" alt=""></body>
</html>

总结

        1.“独占一行;宽高属性生效;默认宽度是父级的100%”是什么显示模式的特点?

                块级
        2.“一行共存多个;宽高属性不生效;宽高由内容撑开”是什么显示模式的特点?
                行内

        3.“一行共存多个;宽高属性生效;宽高默认由内容撑开”是什么显示模式特点

                行内块

转换显示模式

        属性名:

                display

        属性值:

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

         块级和行内块是工作中常用的属性，行内属性基本不用

        示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>显示模式转换</title><style>/* 块级别元素：独占一行 块元素宽度默认是父级的100% 添加宽高属性生效 */div {width: 100px;height: 100px;/* 转换为行内块显示模式 */display: inline-block;/* 转换为行内显示模式 */display: inline;}.div1{background-color: brown;}.div2{background-color: orange;}span{width: 200px;height: 200px;/* 把默认的行内模式转换为块模式 */display: block;/* 转换为行内块模式 */display: inline-block;}.span1{background-color: brown;}.span2{background-color: orange;}/* 图片的宽高会生效 */img{width: 100px;height: 100px;/* 将行内块元素转换为块级别元素 */display: block;}</style>
</head>
<body><!-- 块级别元素：独占一行 块元素宽度默认是父级的100% 添加宽高属性生效--><div class="div1">div1 标签1</div><div class="div2">div2 标签2</div><!-- 行内元素：一行可以共存多个：尺寸由内容撑开，价款高不生效 --><span class="span1">span111111111</span><span class="span2">span1</span><!-- 行内块元素：一行共存多个，默认尺寸由内容撑开，加宽高生效 --><img src="./images/我始终相信.jpg" alt=""><img src="./images/我始终相信.jpg" alt=""></body>
</html>

五、综合案例

综合案例一-热词

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例一、热词</title><style>/* a的默认效果 */a{/* 显示模式的转换效果 */display: block;/* 字体宽度 */width: 200px;/* 字体高度 */height: 80px;/* 背景颜色 */background-color: #3064bb;/* 字体颜色 */color:#fff;/* 取消下划线 */text-decoration: none;/* 标题居中 */text-align: center;/* 字体水平居中 */line-height: 80px;/* 字体大小 */font-size: 18px;}/* 鼠标悬停效果 */a:hover{/* 背景颜色 */background-color: #608dd9;}</style>
</head>
<body><a href="#">HTML</a><a href="#">CSS</a><a href="#">JavaScript</a><a href="#">Vue</a><a href="#">React</a>
</body>
</html>

综合案例二-banner效果

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>banner效果</title><style>.banner{/* 字体高度 */height: 500px;/* 背景颜色 */background-color: #f3f3f4;/* 背景图 */background-image: url(./images/我始终相信.jpg);/* 取消平铺效果 */background-repeat: no-repeat;/* 将图像放在左下角 */border-spacing: left bottom;/* 将字体放在右边 可以继承给子集*/text-align: right;color: #333333;}.banner h2 {font-size: 36px;font-weight: 400;line-height: 100px;}.banner p {font-size: 20px;}.banner a {width: 125px;height: 40px;/* 背景颜色 */background-color: #f06b1f;/* 行内块模式 */display: inline-block;/* 块级无法右对齐 因为块级元素占一行 *//* 超链接文字位置 */text-align: center;/* 超链接文字高度 */line-height: 40px;/* 超链接文字颜色 */color:#fff;/* 超链接不要下划线 */text-decoration: none;/* 字体颜色 */font-size: 20px;}</style>
</head>
<body><div class="banner"><h2>一切都会好的 </h2><p>苦难是花开的伏笔</p><a href="#">我一直相信</a></div>
</body>
</html>

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

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

相关文章

红黑树的实现

红黑树的实现

✨前言✨ &#x1f4d8; 博客主页&#xff1a;to Keep博客主页 &#x1f646;欢迎关注&#xff0c;&#x1f44d;点赞&#xff0c;&#x1f4dd;留言评论 ⏳首发时间&#xff1a;2024年5月7日 &#x1f4e8; 博主码云地址&#xff1a;博主码云地址 &#x1f4d5;参考书籍&#…
阅读更多...
PMP培训一般要多久？

PMP培训一般要多久？

考过PMP很久了&#xff0c;学习时长还是记得很清楚的。因为有一部分的项目经验&#xff0c;报了威班PMP的培训&#xff0c;看了宣传是50天通过PMP&#xff0c;但是我仅仅用了一个月出头就搞定了&#xff0c;算下来才四十天不到就已经学完在准备冲刺参加考试了&#xff0c;最后5…
阅读更多...
数字旅游以科技创新为核心竞争力：推动旅游服务的智能化、高效化，满足游客日益增长的旅游需求

数字旅游以科技创新为核心竞争力：推动旅游服务的智能化、高效化，满足游客日益增长的旅游需求

一、引言 随着科技的飞速发展&#xff0c;数字旅游作为旅游业与信息技术结合的产物&#xff0c;正以其独特的魅力改变着传统旅游业的格局。科技创新作为数字旅游的核心竞争力&#xff0c;不仅推动了旅游服务的智能化、高效化&#xff0c;更满足了游客日益增长的旅游需求。本文…
阅读更多...
了解TMS运输管理系统，实现物流高效运转

了解TMS运输管理系统，实现物流高效运转

TMS运输管理系统&#xff08;Transportation Management System&#xff09;是一种集成物流和信息技术的解决方案&#xff0c;通过优化运输流程、实时跟踪货物信息和自动化管理操作&#xff0c;提高物流效率&#xff0c;降低运营成本&#xff0c;实现高效运输。 TMS运输管理系…
阅读更多...
最常用的AI工具

最常用的AI工具

在日常工作生活中&#xff0c;我试用了几十种AI人工智能工具&#xff0c;下面我来推荐下我最常使用&#xff0c;也是最方便快捷的AI工具。 1百度文心一言 文心一言是一个综合性的大语言模型&#xff0c;整合了很多优秀的提示词&#xff0c;尤其是文心4.0大模型&#xff0c;在中…
阅读更多...
Android build.prop生成过程源码分析

Android build.prop生成过程源码分析

Android的build.prop文件是在Android编译时刻收集的各种property【LCD density/语言/编译时间, etc.】&#xff1b;编译完成之后&#xff0c;文件生成在out/target/product/<board【OK1000】>/system/目录下&#xff1b;在Android运行时刻可以通过property_get()[c/c域] …
阅读更多...
JAVA语言开发的（智慧校园系统源码）智慧校园的痛点、智慧校园的安全应用、智慧校园解决方案

JAVA语言开发的（智慧校园系统源码）智慧校园的痛点、智慧校园的安全应用、智慧校园解决方案

一、智慧校园的痛点 1、信息孤岛问题&#xff1a;由于校园内各部门或系统独立开发&#xff0c;缺乏统一规划和标准&#xff0c;导致数据无法有效整合和共享&#xff0c;形成了信息孤岛。 2、技术更新与运维挑战&#xff1a;智慧校园的建设依赖于前沿的信息技术&#xff0c;如云…
阅读更多...
Android Studio的笔记--布局文件

Android Studio的笔记--布局文件

关于Layout布局文件的使用 LinearLayoutRelativeLayout之前文章的内容一些常见性质在android.graphics.Color中定义了12种常见的颜色常数线性布局LinearLayout 一些常见使用文本框TextView设置文本内容编辑框EditText获取文本内容按钮Button控件使用其他按钮修改图标及名称添加…
阅读更多...
什么年代了，还在拿考勤说事

什么年代了，还在拿考勤说事

最近&#xff0c;看到了某公司的一项考勤规定&#xff1a;自然月内&#xff0c;事假累计超过3次或者累计请假时间超过8小时的&#xff0c;不予审批&#xff0c;强制休假的按旷工处理。 真的想吐槽&#xff0c;什么年代了&#xff0c;还在拿考勤说事&#xff0c;这是什么公司、什…
阅读更多...
模拟电路设计与分析

模拟电路设计与分析

&#x1f3ac; 秋野酱&#xff1a;《个人主页》 &#x1f525; 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长 文章目录 计算机工作原理存储单元 计算机工作原理 计算机最底层语言是二进制&#xff0c;和我们生活中使用的阿拉伯数字是十进制数&#x…
阅读更多...
百度文库AI中文成语点选识别

百度文库AI中文成语点选识别

最近百度文库又出了新验证码。在出现AI旋转验证码之后&#xff0c;又出现了AI中文成语点选。看样子验证码的未来发展路径是全面走向AI。出现这样的情况是谁都不想看到的。由于AI的随机性&#xff0c;未来识别可能会越来越难。 下图就是百度最新的AI中文成语点选的样例图 没有办…
阅读更多...
pandas入门

pandas入门

pandas入门 一、pandas简介1.1 pandas介绍1.2 pandas的基本功能 二、pandas快速入门2.1 读取数据2.2 验证数据2.3 建立索引2.4 数据抽取2.4.1 选择列2.4.2 选择行2.4.3 指定行和列 2.5 排序2.6 分组聚合2.7 数据转置2.8 增加列2.9 统计分析 一、pandas简介 1.1 pandas介绍 pa…
阅读更多...
深度学习之基于YOLOv5草莓成熟度目标检测系统

深度学习之基于YOLOv5草莓成熟度目标检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 草莓作为一种广受欢迎的水果&#xff0c;其成熟度的判断对于保证草莓的品质和口感至关重要。然…
阅读更多...
Redis-五大数据类型-Zset（有序集合）

Redis-五大数据类型-Zset（有序集合）

五大数据类型-Zset&#xff08;有序集合&#xff09; 简介 Zset与Set非常相似&#xff0c;是一个没有重复元素的String集合。 不同之处是Zset的每个元素都关联了一个分数&#xff08;score&#xff09;&#xff0c;这个分数被用来按照从低分到高分的方式排序集合中的元素。集…
阅读更多...
文献速递：深度学习医学影像心脏疾病检测与诊断--从SPECT/CT衰减图中深度学习冠状动脉钙化评分提高了对重大不良心脏事件的预测

文献速递：深度学习医学影像心脏疾病检测与诊断--从SPECT/CT衰减图中深度学习冠状动脉钙化评分提高了对重大不良心脏事件的预测

Title 题目 Deep Learning Coronary Artery Calcium Scores from SPECT/CT Attenuation Maps Improve Prediction of Major Adverse Cardiac Events 从SPECT/CT衰减图中深度学习冠状动脉钙化评分提高了对重大不良心脏事件的预测 01 文献速递介绍 低剂量非门控CT衰减校正&am…
阅读更多...
红黑树（RBTree）认识总结

红黑树（RBTree）认识总结

一、认识红黑树 1.1 什么是红黑树&#xff1f; 红黑树是一种二叉搜索树&#xff0c;与普通搜索树不同的是&#xff0c;在每个节点上增加一个“颜色”变量 —— RED / BLACK 。 通过对各个节点颜色的限制&#xff0c;确保从 根 到 NIL &#xff0c;没有一条路径会比其他路径长出…
阅读更多...
Golang | Leetcode Golang题解之第61题旋转链表

Golang | Leetcode Golang题解之第61题旋转链表

题目&#xff1a; 题解&#xff1a; func rotateRight(head *ListNode, k int) *ListNode {if k 0 || head nil || head.Next nil {return head}n : 1iter : headfor iter.Next ! nil {iter iter.Nextn}add : n - k%nif add n {return head}iter.Next headfor add > …
阅读更多...
8.k8s中网络资源service

8.k8s中网络资源service

目录 一、service资源概述 二、service资源类型 1.ClusterIP类型 2.service的nodeport类型 3.service的loadbalancer类型&#xff08;了解即可&#xff09; 4.service的externalname类型&#xff08;了解即可&#xff09; 三、nodeport的端口范围设置和svc的endpoint列表 1.修…
阅读更多...
spring高级篇（十）

spring高级篇（十）

1、内嵌tomcat boot框架是默认内嵌tomcat的&#xff0c;不需要手动安装和配置外部的 Servlet 容器。 简单的介绍一下tomcat服务器的构成&#xff1a; Catalina&#xff1a; Catalina 是 Tomcat 的核心组件&#xff0c;负责处理 HTTP 请求、响应以及管理 Servlet 生命周期。它包…
阅读更多...
视频改字祝福/豪车装X系统源码/小程序uniapp前端源码

视频改字祝福/豪车装X系统源码/小程序uniapp前端源码

uniapp视频改字祝福小程序源码&#xff0c;全开源。创意无限&#xff01;AI视频改字祝福&#xff0c;豪车装X系统源码开源&#xff0c;打造个性化祝福视频不再难&#xff01; 想要为你的朋友或家人送上一份特别的祝福&#xff0c;让他们感受到你的真诚与关怀吗&#xff1f;现在…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发