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

L_cl2024-05-11 16:47

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

------ 24.5.7

一、复合选择器

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

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

1.后代选择器

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

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

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

示例：

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 里面的 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 属性}，父子选择器之间用 **>**隔开

示例：

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 的儿子 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 属性}，选择器之间用，隔开。

示例：

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 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 属性}，选择器之间连写，没有任何符号

示例：

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>
        /* 类选择器的名字就是点加类名 .是类选择器自带的 */
        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 属性}

示例：

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: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的顺序书写。

示例：

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: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特性：

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

继承性

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

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

html 复制代码 
<!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 属性都生效

html 复制代码 
<!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 是一个提权功能，提高权重/优先级到 最高，慎用

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>
        *{
            /* !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

html 复制代码 
<!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

html 复制代码 
<!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

html 复制代码 
<!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)

html 复制代码 
div {
    width: 400px;
    height:400px;
    background-image:url(./images/1.png);
}
示例：
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>
        /* 盒子是 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 垂直方向平铺

示例：
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;
        }
    </style>
</head>
<body>
    <div> 
        div标签
    </div>
</body>
</html>

背景图位置

属性名：

background-position(bgp)

属性值：

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

关键字

关键字 位置

left 左侧

right 右侧

centei 居中

top 顶部

bottom 底部
坐标 (数字+px，正负都可以)

水平:正数向右;负数向左

垂直:正数向下;负数向上

html 复制代码 
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;
}
示例：
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;

            /* 调整背景图位置 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>
提示：

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中;数字只写一个值表示水平方向，垂直方向为居中

示例：
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)

示例：
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: 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

html 复制代码 
body {
    background-image:url(./images/bg.jpg);    
    background-repeat:no-repeat;
    background-attachment:fixed;
}
示例：
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>
        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)

属性值:

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

html 复制代码 
div {
    width: 400px;
    height:400px;
    background: pink url(./images/1.png) no-repeat right center/cover;
}
示例：
html 复制代码 
<!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%

添加宽高属性生效

行内元素

一行可以显示多个

宽高尺寸由内容撑开

设置宽高属性不生效

行内块元素

一行可以显示多个

宽高尺寸也可以由内容撑开

设置宽高属性生效

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>
        /* 块级别元素：独占一行 块元素宽度默认是父级的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 行内

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

示例：
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>
        /* 块级别元素：独占一行 块元素宽度默认是父级的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>

五、综合案例

综合案例一-热词

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效果

html 复制代码 
<!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>
相关推荐
我要洋人死4 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人15 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人16 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR21 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香23 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969326 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai32 分钟前
wflow-web：开源啦 ，高仿钉钉、飞书、企业微信的审批流程设计器，轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91540 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程：python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play