2023 【黑马程序员】 CSS 第二天

最新推荐文章于 2024-06-13 09:45:33 发布
最新推荐文章于 2024-06-13 09:45:33 发布
阅读量70 收藏
点赞数 1
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abeijixingdeye/article/details/135024910
版权

目录

一、复合选择器

1. 复合选择器

1. 后代选择器

 2. 子代选择器

3. 并集选择

4. 交集选择器 – 了解

2. 伪类选择器

1. 伪类-超链接（拓展）

 二、CSS 特性

1. 继承性

 2. 层叠性

 3. 优先级

 4. 优先级 – 叠加计算规则

三、Emmet 写法

四、背景属性

1. 背景图

2. 背景图平铺方式

3. 背景图位置

4. 背景图缩放

5. 背景图固定

6. 背景复合属

五、显示模式

 1. 常见模式

 2. 转换显示模式

六、综合案例

1. 热词

2. banner 效果

一、复合选择器

1. 复合选择器

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

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

 使用方法：

<span>span 标签</span>
<div>
    <span>文字颜色是绿色</span>
</div>

1. 后代选择器

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

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

使用方法：

<style>
    div span {
        color: red;
    }
</style>
<span> span 标签</span>
<div>
    <span>这是 div 的儿子 span</span>
</div>

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div span {
            color: red;
        }
    </style>
</head>

<body>
    <span>
        span 标签
    </span>

    <div>
        <span>
            这是 div 的儿子
        </span>
        <p>
            <span>
                这是 div 的孙子
            </span>
        </p>
    </div>
</body>

</html>

网页运行结果：

 2. 子代选择器

子代选择器：选中某元素的子代元素（最近的子级）

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

使用方法：

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

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>span {
            color: red;
        }
    </style>
</head>

<body>
    <span>
        span 标签
    </span>

    <div>
        <span>
            这是 div 的儿子
        </span>
        <p>
            <span>
                这是 div 的孙子
            </span>
        </p>
    </div>
</body>

</html>

网页运行结果：

3. 并集选择

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

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

使用方法：

<style>
    div,
    p,
    span {
        color: red;
    }
</style>
<div> div 标签</div>
<p>p 标签</p>
<span>span 标签</span>

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>这是 div 标签</div>
    <p>这是 p 标签</p>
    <span>这是 span 标签</span>
</body>

</html>

网页运行结果：

4. 交集选择器 – 了解

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

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

注意：如果交集选择器中有标签选择器，标签选择器必须书写在最前面

使用方法：

p.box {
    color: red;
}

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.animal {
            color: red;
        }
    </style>
</head>

<body>
    <div class="animal">小犬犬</div>
    <p class="animal">大猫猫</p>
</body>

</html>

网页运行结果：

2. 伪类选择器

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

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

 使用方法：

<style>
    a:hover {
        color: red;
    }

    .box:hover {
        color: green;
    }
</style>
<a href="#">a 标签</a>
<div class="box">div 标签</div>

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:hover {
            color: red;
        }

        .animal:hover {
            color: green;
        }
    </style>
</head>

<body>
    <div>小犬犬</div>
    <p class="animal">大猫猫</p>
</body>

</html>

网页运行结果：

鼠标悬停在”小犬犬“上

鼠标悬停在”大猫猫“上

1. 伪类-超链接（拓展）

超链接一共有四个状态 

提示：

  • 如果要给超链接设置以上四个状态，需要按 LVHA 的顺序书写
  • 工作中一般只使用 hover 状态
选择器作用
:link访问前
:visited访问后
:hover鼠标悬停
:active点击时（激活）

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div:link {
            color: black;
        }

        div:visited {
            color: aqua;
        }

        div:hover {
            color: brown;
        }

        div:active {
            color: blue;
        } */
        div {
            color: red;
        }

        div:hover {
            color: green;
        }
    </style>
</head>

<body>
    <div>小犬犬</div>
</body>

</html>

网页运行结果：

鼠标未悬停

鼠标悬停

 

 二、CSS 特性

CSS特性：化简代码 / 定位问题，并解决问题

  • 继承性
  • 层叠性
  • 优先

1. 继承性

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

注意：

  • 如果标签有默认文字样式会继承失败
  • 例如：a 标签的颜色、h1 标签的字体大小

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: red;
            font-size: 30px;
            font-weight: 700;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
    <p>大猫猫</p>
    <a href="a">小猫咪</a>
    <h1>犬犬国王</h1>
</body>

</html>

 网页运行结果：

 2. 层叠性

特点：

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

注意：选择器类型相同则遵循层叠性，否则按选择器优先级判断

 使用方法：

<style>
    div {
        color: red;
        font-weight: 700;
    }

    div {
        color: green;
        font-size: 30px;
    }
</style>
<div>div 标签</div>

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
            font-weight: 700;
        }

        div {
            color: green;
            font-size: 200;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>

网页运行结果：

 3. 优先级

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

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

公式：

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

 使用方法：

<style>
    div {
        color: red;
    }

    .box {
        color: green;
    }
</style>
<div class="box">div 标签</div>

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: red;
        }

        * {
            color: green;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>
<style>

网页运行结果：

 4. 优先级 – 叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算

公式：

  • （每一级之间不存在进位）
  • （行内样式, id选择器个数, 类选择器个数, 标签选择器个数）

规则：

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

一般只有在考试时使用，像比较 c 语言中的符号优先级；工作一般不这样用，所以不多赘述

 使用方法：

    div {
        color: red;
    }

    .box {
        color: green;
    }
    .box div {
        color: red;
    }

    .box {
        color: green;
    }

三、Emmet 写法

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

HTML：

说明标签结构Emmet
类选择器<div class="box"></div>标签名.类名
id选择器<div id="box"></div>标签名#id名
同级标签<div></div><p></p>div+p
父子级标签<div><p></p></div>div>p
多个相同标签<span>1</span><span>2</span><span>3</span>span*3
有内容的标签<div>内容</div>div{内容}

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

说明CSS属性Emmet
宽度widthw
宽度500pxwidth: 500px;w500
背景色background-colorbgc
多个属性width:20px;height:100px;background-color:#fff;w200+h100+bgc

四、背景属性

1. 背景图

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

属性名：background-image（bgi）

属性值：url(背景图 URL

提示：背景图默认有平铺（复制）效果

使用方式：

    div {
        width: 400px;
        height: 400px;
        background-image: url(./images/1.png);
    }

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./aowu.jpg);
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>
<style>

网页运行结果：

2. 背景图平铺方式

属性名：background-repeat（bgr）

属性值 ：

属性值效果
no-repeat不平铺
repeat平铺（默认效果）
repeat-x水平方向平铺
repeat-y垂直方向平铺

 使用方法：

    div {
        width: 400px;
        height: 400px;
        background-color: pink;
        background-image: url(./images/1.png);
        background-repeat: no-repeat;
    }

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./playy.gif);

            background-color: pink;
            background-repeat: no-repeat;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>
<style>

网页运行结果：

3. 背景图位置

属性名：background-position（bgp）

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

坐标（数字 + px，正负都可以）

  • 水平：正数向右；负数向左
  • 垂直：正数向下；负数向上

提示：

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

关键字：

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

 使用方法：

<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;
    }
</div>

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./playy.gif);

            background-color: pink;
            background-repeat: no-repeat;

            /* background-position: 50px 50px; */
            background-position: center;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>

网页运行结果：

4. 背景图缩放

作用：设置背景图大小

属性名：background-size（bgz）

常用属性值： 

  • 关键字：cover：等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见               contain：等比例缩放背景图片以完全装入背景区，可能背景区部分空白
  • 百分比：根据盒子尺寸计算图片大小
  • 数字 + 单位（例如：px）

提示：工作中，图片比例与盒子比例相同，使用 cover 或 contain 缩放背景图效果相同

 使用方法：

<div> {
    width: 500px;
    height: 400px;
    background-color: pink;
    background-image: url(./images/1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: contain;
    }
</div>

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-image: url(./playy.gif);

            background-color: pink;
            background-repeat: no-repeat;

            background-size: 100%;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>

网页运行结果：

5. 背景图固定

作用：背景不会随着元素的内容滚动

 属性名：background-attachment（bga）

属性值：fixed 

注意：仅了解，使用概率并不高

使用方法：

<body>{
    background-image: url(./images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    }
</body>

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(./playy.gif);
            background-repeat: no-repeat;
            background-position: center top;
            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>
</body>

</html>

网页运行结果：

 

6. 背景复合属

属性名：background（bg）

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

使用方法：

<div>
    {
    width: 400px;
    height: 400px;
    background: pink url(./images/1.png) no-repeat right center/cover;
    }
</div>

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 313px;
            background: pink url(./playy.gif) no-repeat center bottom/contain;
        }
    </style>

</head>

<body>
    <div>小犬犬</div>
</body>

</html>

网页运行结果：

五、显示模式

显示模式：标签（元素）的显示方式

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

 1. 常见模式

块级元素：（div)

  • 独占一行
  • 宽度默认是父级的100%
  • 添加宽高属性生效

行内元素：(span)

  •  一行可以显示多个
  • 设置宽高属性不生效
  • 宽高尺寸由内容撑开

行内块元素：(img)

  •  一行可以显示多个
  • 设置宽高属性生效
  • 宽高尺寸也可以由内容撑开 

例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .div1 {
            background-color: brown;
        }

        .div2 {
            background-color: orange;
            ;
        }

        span {
            width: 100px;
            height: 100px;
        }

        .span1 {
            background-color: brown;
        }

        .span2 {
            background-color: orange;
            ;
        }

        img {
            width: 100px;
            height: 200px;
        }
    </style>

</head>

<body>
    <!-- 块元素 -->
    <div class="div1">小犬犬</div>
    <div class="div2">小犬犬</div>
    <!-- 行内元素 -->
    <span class="span1">大犬犬</span>
    <span class="span2">大犬犬</span>
    <!-- 行内块元素 -->
    <img src="./playy.gif">
    <img src="./playy.gif">
</body>

</html>

网页运行结果：

 2. 转换显示模式

属性名：display

属性值：

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

 例子：

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            display: inline;
            /* display: inline-block; */
        }

        .div1 {
            background-color: brown;
        }

        .div2 {
            background-color: orange;
            ;
        }

        span {
            width: 100px;
            height: 100px;
            display: inline-block;
            /* display: block; */
        }

        .span1 {
            background-color: brown;
        }

        .span2 {
            background-color: orange;
            ;
        }

        img {
            width: 100px;
            height: 200px;
            display: block;
            /* display: inline; */
        }
    </style>

</head>

<body>
    <!-- 块元素 -->
    <div class="div1">小犬犬</div>
    <div class="div2">小犬犬</div>
    <!-- 行内元素 -->
    <span class="span1">大犬犬</span>
    <span class="span2">大犬犬</span>
    <!-- 行内块元素 -->
    <img src="./playy.gif">
    <img src="./playy.gif">
</body>

</html>

网页运行结果：

六、综合案例

1. 热词

 

2. banner 效果

 

<!-- html 代码 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(./bgc3.jpg);
            background-repeat: no-repeat;
            background-position: top;
            background-size: cover;
            /* background-attachment: fixed; */
        }

        p {
            line-height: 10px;
            text-indent: 15%;
            font-weight: 600;
            color: rgb(23, 125, 184)
        }

        span>img {
            height: 50px;
            display: block;
            /* background-color: pink; */
        }

        div>p {
            line-height: 10px;
            text-indent: 15%;
            font-weight: 700;
            font-size: 60px;
            color: rgb(23, 125, 184);
        }

        span>p {
            line-height: 10px;
            text-indent: 15%;
            font-weight: 600;
            color: rgb(23, 125, 184);
        }

        .a {
            text-decoration: underline;

        }

        .a:hover {
            color: aliceblue;
        }
    </style>

</head>

<body>
    <span>
        <img src="./logo.png">
    </span>
    <br><br><br><br>
    <div>
        <p>文心一言</p>
        <p>有用、有趣、有温度</p>
    </div>
    <p>既能写文案、读文档，又能脑洞大开、答疑解惑，还能倾听你的故事、感受你的心声</p>
    <p>快来和我对话吧！</p>
    <span>
        <p>插件市场开放</p>
        <p class="a">申请入驻!</p>
    </span>
</body>

</html>

 

一只北极星
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习笔记-黑马程序员CSS
01-09
前端学习笔记-黑马程序员CSS
css第二天高级技巧.md
07-14
css第二天高级技巧.md
2023【黑马程序员】移动 Web 第二天
abeijixingdeye的博客
01-03 885
空间转换、动画
2023 【黑马程序员】 CSS 第八天
abeijixingdeye的博客
12-31 830
小兔鲜儿首页（下）
2023 【黑马程序员】CSS 第七天
abeijixingdeye的博客
12-30 925
SEO、Favicon、小兔鲜儿首页制作（上）
2023 【黑马程序员】 CSS 第六天
abeijixingdeye的博客
12-29 888
定位、CSS 高级技巧、修饰属性
2023 【黑马程序员】CSS 第五天
abeijixingdeye的博客
12-26 94
学成在线网页搭建、慕课网网页搭建
2023 【黑马程序员】CSS 第一天
abeijixingdeye的博客
12-15 74
/* 选择器 { } */p {/* CSS 属性 */color: red;体验 CSS
2023 【黑马程序员】CSS 第四天
abeijixingdeye的博客
12-20 71
标准流、浮动、清除浮动、Flex 布局
2023 【黑马程序员】CSS 第三天
abeijixingdeye的博客
12-18 81
选择器、盒子模型
2023【黑马程序员】HTML 第一天
abeijixingdeye的博客
12-13 200
HTML超文本标记语言——HyperTextMarkupLanguage。
Pinyougou_html_css_黑马程序员_
09-29
品优购项目实例 黑马程序员 适合新手 静态网页
css第二天定位笔记.md
07-14
css第二天定位笔记.md
CSS第二天.md
05-03
CSS第二天.md
CSS中，设置 0.5px 会生效吗
Keep trying, keep going
06-12 301
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
最新发布
x_XDGS的博客
06-13 362
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
scss是什么安装使⽤的步骤
codedadi的博客
06-09 763
SCSS，也称为Sassy CSS，是Sass（Syntactically Awesome Stylesheets）的一种语法，它是CSS的预处理器，允许你使用变量、嵌套规则、混合（mixin）等功能，使CSS编写更加简洁、清晰和可维护。例如，将styles.scss编译为styles.css，可以输入以下命令：sass styles.scss styles.css。这将在同一目录下生成一个名为styles.css的文件，其中包含编译后的CSS代码。创建一个.scss文件，例如styles.scss。
css系列：音频播放效果-波纹律动
zkx529的博客
06-12 307
音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条
黑马程序员css笔记
08-18
黑马程序员的CSS笔记涵盖了一些关于CSS的内容。在CSS中，可以使用和标签或CSS来实现字体倾斜效果，并可以使用和标签或CSS来实现字体加粗效果。值得注意的是，CSS本身是没有语义的，它只是一种样式定义语言。要想将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值