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>

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

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

相关文章

Unity 性能优化之LOD技术（十）

Unity 性能优化之LOD技术（十）

提示&#xff1a;仅供参考&#xff0c;有误之处&#xff0c;麻烦大佬指出&#xff0c;不胜感激&#xff01; 文章目录 LOD技术效果一、LOD技术是什么&#xff1f;二、LODGroup组件介绍三、LODGroup组件使用步骤添加组件添加模型 四、Project Settings中与LOD组件相关参数总结 L…
阅读更多...
pytest(二)：关于pytest自动化脚本编写中，初始化方式setup_class与fixture的对比

pytest(二)：关于pytest自动化脚本编写中，初始化方式setup_class与fixture的对比

一、自动化脚本实例对比 下面是一条用例，使用pytest框架，放在一个类中，两种实现方式： 1.1 setup_class初始化方式 1. 优点： 代码结构清晰，setup_class 和 teardown_class 看起来像传统的类级别的 setup 和 teardown 方法。2. 缺点： 使用 autouse=True 的 fixture 作为…
阅读更多...
free5gc+ueransim操作

free5gc+ueransim操作

启动free5gc容器 cd ~/free5gc-compose docker-compose up -d 记录虚拟网卡地址&#xff0c;eth0 ifconfig 查看并记录amf网元的ip地址 sudo docker inspect amf "IPAddress"那一行&#xff0c;后面记录的即是amf的ip地址 记录上述两个ip地址&#xff0c;完成UER…
阅读更多...
MCU通过UART/SPI等接口更新flash的方法

MCU通过UART/SPI等接口更新flash的方法

MCU可提供一种方便的方式来更新flash内容以进行错误修复bugfix或产品更新update。可以使用以下任何模式更新flash内容： •系统内编程（ISP，In-System Programming）：用于使用内部bootloader程序和UART/SPI对片上闪存进行编程program或重新编程reprogram。 •应用程序内编程…
阅读更多...
一毛钱不到的FH8208C单节锂离子和锂聚合物电池一体保护芯片

一毛钱不到的FH8208C单节锂离子和锂聚合物电池一体保护芯片

前言 目前市场上电池保护板&#xff0c;多为分体方案&#xff0c;多数场合使用没有问题&#xff0c;部分场合对空间有进一步要求&#xff0c;或者你不想用那么多器件&#xff0c;想精简一些&#xff0c;那么这个芯片就很合适&#xff0c;对于充电电池来说&#xff0c;应在使用…
阅读更多...
AI论文速读 |2024[IJCAI]TrajCL: 稳健轨迹表示:通过因果学习隔离环境混杂因素

AI论文速读 |2024[IJCAI]TrajCL: 稳健轨迹表示:通过因果学习隔离环境混杂因素

题目&#xff1a; Towards Robust Trajectory Representations: Isolating Environmental Confounders with Causal Learning 作者&#xff1a;Kang Luo, Yuanshao Zhu, Wei Chen, Kun Wang(王琨), Zhengyang Zhou(周正阳), Sijie Ruan(阮思捷), Yuxuan Liang(梁宇轩) 机构&a…
阅读更多...
AI数据中心网络技术选型,InfiniBand与RoCE对比分析

AI数据中心网络技术选型,InfiniBand与RoCE对比分析

InfiniBand与RoCE对比分析&#xff1a;AI数据中心网络选择指南 随着 AI 技术的蓬勃发展&#xff0c;其对数据中心网络的要求也日益严苛。低延迟、高吞吐量的网络对于处理复杂的数据密集型工作负载至关重要。本文分析了 InfiniBand 和 RoCE 两种数据中心网络技术&#xff0c;帮助…
阅读更多...
91、动态规划-不同的路径

91、动态规划-不同的路径

思路&#xff1a; 首先我们可以使用暴力递归解法&#xff0c;无非就是每次向下或者向右看看是否有解法&#xff0c;代码如下&#xff1a; public class Solution {public int uniquePaths(int m, int n) {return findPaths(0, 0, m, n);}private int findPaths(int i, int j,…
阅读更多...
数据结构-线性表-应用题-2.2-12

数据结构-线性表-应用题-2.2-12

1&#xff09;算法的基本设计思想&#xff1a;依次扫描数组的每一个元素&#xff0c;将第一个遇到的整数num保存到c中&#xff0c;count记为1&#xff0c;若遇到的下一个整数还是等于num,count,否则count--,当计数减到0时&#xff0c;将遇到的下一个整数保存到c中&#xff0c;计…
阅读更多...
04.2.配置应用集

04.2.配置应用集

配置应用集 应用集的意思就是&#xff1a;将多个监控项添加到一个应用集里面便于管理。 创建应用集 填写名称并添加 在监控项里面找到对应的自定义监控项更新到应用集里面 选择对应的监控项于应用集
阅读更多...
[疑难杂症2024-004] 通过docker inspect解决celery多进程记录日志莫名报错的记录

[疑难杂症2024-004] 通过docker inspect解决celery多进程记录日志莫名报错的记录

本文由Markdown语法编辑器编辑完成&#xff0e; 写作时长: 2024.05.07 ~ 文章字数: 1868 1. 前言 最近我负责的一个服务&#xff0c;在医院的服务器上线一段时间后&#xff0c;利用docker logs查看容器的运行日志时&#xff0c;发现会有一个"莫名其妙"的报错&…
阅读更多...
Verilog中4bit超前进位加法器

Verilog中4bit超前进位加法器

4bit超前进位加法器的逻辑表达式如下&#xff1a; 中间变量GiAiBi&#xff0c;PiAi⊕BiGi​Ai​Bi​&#xff0c;Pi​Ai​⊕Bi​ 和&#xff1a;SiPi⊕Ci−1Si​Pi​⊕Ci−1​&#xff0c;进位&#xff1a;CiGiPiCi−1Ci​Gi​Pi​Ci−1​ 用Verilog语言采用门级描述方式&am…
阅读更多...
Buuctf-Misc题目练习

Buuctf-Misc题目练习

打开后是一个gif动图&#xff0c;可以使用stegsolve工具进行逐帧看。 File Format:文件格式 Data Extract:数据提取 Steregram Solve:立体试图 可以左右控制偏移 Frame Browser:帧浏览器 Image Combiner:拼图&#xff0c;图片拼接 所以可以知道我们要选这个Frame Browser …
阅读更多...
odoo实施之创建行业demo

odoo实施之创建行业demo

创建数据库&#xff0c;添加公司数据 选择应用&#xff0c;获取15天免费试用 创建完成 设置客户公司logo 创建用户 更改用户语言 前置条件&#xff1a;配置邮件 开发模式下&#xff0c;额外信息 加载demo数据
阅读更多...
微信小程序 手机号授权登录

微信小程序 手机号授权登录

手机号授权登录 效果展示 这里面用的是 uni-app 官方的登录 他支持多端发布 https://zh.uniapp.dcloud.io/api/plugins/login.html#loginhttps://zh.uniapp.dcloud.io/api/plugins/login.html#login 下面是代码 <template><!-- 授权按钮 --><button v-if&quo…
阅读更多...
微软 AI 研究团队推出 SIGMA：一个开源研究平台，旨在推动混合现实与人工智能交叉领域的研究与创新

微软 AI 研究团队推出 SIGMA：一个开源研究平台，旨在推动混合现实与人工智能交叉领域的研究与创新

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
如何永久删除服务和相关文件夹

如何永久删除服务和相关文件夹

如何永久删除服务和文件夹&#xff1f; How can I remove the service and folder permanently? 以AlibabaProtect服务为例 takeown /f "C:\Program Files (x86)\AlibabaProtect sc delete AlibabaProtect我运行了上述操作&#xff0c;并通过任务管理器杀死了“阿里巴巴…
阅读更多...
AI时代的就业转型与个人发展

AI时代的就业转型与个人发展

AI时代的就业转型与个人发展&#xff1a;机遇与挑战并存 AI出现的背景&#xff1a;技术革命的浪潮 随着21世纪信息技术的突飞猛进&#xff0c;人工智能&#xff08;Artificial Intelligence, AI&#xff09;作为一场技术革命的产物&#xff0c;正逐渐从科幻小说走向现实世界的…
阅读更多...
linux的信号量的使用

linux的信号量的使用

1.信号量 在多线程情况下&#xff0c;线程要进入关键代码就得获取信号量&#xff08;钥匙&#xff09;{sem_init(&sem, 0, 0);}&#xff0c;没有信号量的情况下就一直等待sem_wait(&sem)&#xff0c;只到别人把钥匙&#xff08;sem_post(&sem)&#xff09;给你。 …
阅读更多...
淘宝数据分析——Python爬虫模式♥

淘宝数据分析——Python爬虫模式♥

大数据时代&#xff0c; 数据收集不仅是科学研究的基石&#xff0c; 更是企业决策的关键。 然而&#xff0c;如何高效地收集数据 成了摆在我们面前的一项重要任务。 本文将为你揭示&#xff0c; 一系列实时数据采集方法&#xff0c; 助你在信息洪流中&#xff0c; 找到…
阅读更多...
最新文章

Copyright @ 2022~2023