蓝旭第二周预习-CSS进阶+设计

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

一、CSS伪类与伪元素

1.1伪类？伪元素？

1.1.1伪类

伪类：伪类是选择器的一种，用于选择处于特定状态的元素，比如当鼠标悬浮在一个链接上或者点击链接后，它们表现得会像是你像你文档的某个部分应用了一个类一样。

特点：为处于某个状态的已有元素添加对应的样式，该状态根据用户行为而动态改变。

用于：~设置鼠标悬停在元素上时的样式

           ~为已访问和未访问链接设置不同的样式

           ~设置元素获得焦点时的样式

伪类就是开头为冒号的关键字：

:pseudo-class-name

1.1.2伪元素

伪元素：伪元素以类似方式表现，但不同的是，它表现得像是你往标记文本中加入全新的HTML元素一样，而不是向现有的元素上应用类。产生效果是把不存在的元素选出来。

元素的特殊位置，可以在开始位置、最后位置、第一行。同样是添加到某个选择器后边去选择某个元素的某个部分。

特点：伪元素也是元素，so，可以为它添加大部分其他元素的属性，eg，字体属性、背景属性...，并为其添加样式。值得注意的是，由于伪元素默认是内联元素，所以如果要使得盒子模型中的height等属性有效的话，必须将其转化为块元素，具体就是设置其display属性为block，或者设置为float...(先了解一下)

用于：~设置元素的首字母、首行样式

           ~在元素的内容之前或之后插入内容

伪元素开头为两个冒号:: ：

::pseudo-element-name

1.2伪类与伪元素区别

1.2.1表达方式

伪类表现的是某种状态被选择出来，eg，:hover、:checked;

而伪元素表现的是选择元素的某个部分，使这部分看起来像是一个独立元素，实际上并不是，eg，::before、::after

可以说，伪类就是选择元素某种状态，伪元素就是创建一个HTML元素

1.2.2符号

伪类使用单个冒号，伪元素使用双冒号

1.3常见伪类与伪元素

1.3.1伪类

        选择器                                        描述
        :active                表示激活状态
        :checked                匹配处于选中状态的单选或复选框
        :disabled                匹配处于关闭状态的用户界面元素
        :enabled                匹配处于开启状态的用户界面元素

        :first-

        chilrd

                匹配兄弟元素中的第一个元素

        :focus

                当一个元素有焦点时匹配
        :hover                表示当鼠标悬浮时的状态

        :lasr-

        child

                匹配兄弟元素中最末的那个元素
        :nth-child

匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（举个栗子：2n+1匹配元素1、3、5、7...即所有奇数个）

        :visited                      表示访问过后的状态
        :link                表示未访问的状态
/* 伪元素选择器（即伪类），对a标签的状态改变的 
        - 静止状态 a:link{css属性}
        - 悬浮状态 a：hover{css属性}
        - 触发状态 a：active{css属性}
        - 完成状态 a:visited{css属性}
        */
<style>
        a:link{
            background-color: chartreuse;
        }
        a:hover{
            background-color: blue;
        }
        a:active{
            background-color: rgb(203, 63, 161);
        }
        a:visited{
            background-color: rgb(214, 205, 37);
        }
</style>


<body>
    <a herf="http://www.baidu.com">百度一下</a>
</body>

1.3.2伪元素

        选择器                                        描述
        ::after                        在元素最后位置加内容
        ::before                        在元素开始位置加内容
        ::first-letter                        选择元素的第一个字
        ::first-line                        选择首行
        ::selection                        匹配文档中被选择的那部分
<style>
    <!--注意，在元素的::before和::after中插入内容content属性
        如果没有写content样式，伪元素会失效
    -->
    <!--在box盒子最后位置添加伪元素，颜色为红色-->
    .box::after{
        content:"";
        color:red;
    }
    <!--在box盒子开始位置加入伪元素，颜色蓝，字体13px-->
    .box::before{
        content:"";
        color:blue;
        font-size:13px;
    }
    <!--为box盒子中内容首行添加样式-->
    .box::first-line{
        background-color:pink;
        font-size:13px;
    }
    <!--为box盒子中内容的第一个字添加样式-->
    .box::first-letter{
        color:green;
    }

</style>

二、关系选择器

元素（标签）之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

2.1子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素>子元素{}

eg，div>span{}...

2.2后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先 后代

eg，div.rou{}

2.3选择下一个兄弟

语法：前一个+后一个

eg，p+span

2.4选择下面所有的兄弟

语法：兄~弟

eg，p~span

<!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>
        /*1--为div的子元素span设置一个字体颜色*/
        div>span{
            color:red;
        }
        /*2--div里span元素字体都变为30px*/
        div.rou{
            font-size: 30px;
        }
        div>p>span{
            color: violet;
        }
        /*选择零食区，字体颜色blue*/
        p+span{
            color:blue;
        }
        p~span{
            background-color: tomato;
        }
    </style>
</head>
<body>
    <div>
        我是超市<br/>
        <span>我是零食区</span>
        <p>
            我是生鲜区
            <span class="rou">肉类</span>
        </p>
        <span>我是鞋包区</span><br/>
        <span>我是洗护区</span>
    </div><br/>
    <span>我是超市外的小卖部</span>
</body>
</html>

三、CSS布局

3.1网页布局三方法

表格布局、框架布局、DIV+CSS页面布局

3.1.1表格布局

优势：

1）实现方式简单；

2）各个元素可以位于表格独立的单元格中，相互影响较小；

3）对浏览器兼容性好。

缺陷：

1）在某些浏览器下，表格只有在全部加载完成后才可以显示，数据量比较大时会影响显示速度；

2）搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦；

3）在多重表格嵌套的情况下，代码可读性较差，页面的的加载速度也会受影响。

所以一般不采用表格布局。

3.1.2框架布局

优势：

1）网页更整洁、清晰，网页的加载速度较快。

缺陷：

1）框架用的较多，会影响网页的浏览速度；

2）框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限。

因此，框架布局一般应用于规模较小的网站。

3.1.3DIV+CSS页面布局

优势：

1）内容和表现相分离；

2）对搜索引擎的支持更加友好；

3）文件代码更加精简，执行速度更快；

4）易于维护。

3.2网页栏目划分

3.2.1网页栏目主要区域

页头、banner、导航区域、内容、页脚

3.2.2页头

网页的页眉，主要作用是定义页面标题

3.2.3banner

banner横幅广告，可有可无，不一定放在页头，也可以放在其他区域，banner也不一定防止广告

3.2.4导航区域

通过导航区域可以看出网站的定位，也不是所有的网站都有导航区域。导航区域通常以导航条的形式出现。

导航条大致分为：横向导航条、纵向导航条、菜单导航条

3.2.5内容

具体内容

3.2.6页脚

网页最下方，通常用来展示版权信息、法律声明信息、网站备案信息、联系方式等

3.3元素类型转化

3.3.1块元素

块元素在页面中以区域块的形式出现，每个块元素通常会独自占据一整行或多个整行，可以对其设置宽度、高度、对齐等属性。

常见的有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

其中，<div>是最典型的块元素。

3.3.2行内元素

行内元素也称为内联元素或内嵌元素，一个行内元素通常会和其前后的其他行内元素显示在同一行中，不占独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性，常用于控制页面中文本的样式。

常见的有：<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>...

其中，<span>是最典型的行内元素。

3.3.3块元素与行内元素代码样例

<!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 type="text/css">
        p{
            background-color: pink;
        }
        ol{
            background-color: red;
        }
        span{
            background-color: yellow;
        }
        i{
            background-color: #cff;
        }
        div{
            background: #ffc;
        }
    </style>
</head>
<body>
    <p>p标记块元素</p>
    <ol>ol标记块元素</ol>
    <span>span标记行内元素</span>
    <i>i标记行内元素</i>
    <div>div标记块元素</div>
</body>
</html>

3.3.4块元素和行内元素转化

使用display属性对元素类型进行转换

display属性常用的属性值及含义：

1）inline：此元素将显示为行内元素（行内元素默认的display属性值）

2）block：此元素将显示为块元素（块元素默认的display属性值）

3）inline-block：此元素将显示为行内块元素，可以对其设置宽度、高度和对齐等属性，但是该元素不会独占一行。使用该元素主要是为了设置属性（行内元素不可设置属性，转化为行内块元素即可）

4）none：此元素将被隐藏，不显示，不占用内存空间，相当于该元素不存在

<!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 type="text/css">
        p{
            background-color: pink;
            display: inline;
        }
        ol{
            background-color: red;
            display: inline;
        }
        span{
            background-color: yellow;
            display: block;
        }
        i{
            background-color: #cff;
        }
        div{
            background-color: #ffc;
            display: inline;
        }
    </style>
</head>
<body>
    <p>p标记块元素</p>
    <ol>ol标记块元素</ol>
    <span>span标记行内元素</span>
    <i>i标记行内元素</i>
    <div>div标记块元素</div>
</body>
</html>

3.4定位

使用的是css属性的position

属性值：relative（相对）、absolute（绝对）、fixed（固定）

使用了定位属性后，才可以使用top，bottom，left，right这些位置属性

3.4.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>
        #div-1{
            width:200px;
            height: 200px;
            background-color: red;
            position:relative;
            top:50px;
            left:50px;
        }
        #div-2{
            width:200px;
            height:200px;
            background-color: green;
        }
        #div-3{
            width:200px;
            height:200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div id="div-1">div-1</div>
        <div id="div-2">div-2</div>
        <div id="div-3">div-3</div>
    </div>
</body>
</html>

3.4.2绝对定位

######

与相对定位不同，绝对定位元素框从文档流完全删除，并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。如果在祖先元素中没有设置relative定位时，就默认相对于body进行定位。

元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。（这里的意思是，如果两个框排一列，最上方的框向右偏离，下方的框会上浮到最上方的框之前的位置，当然这是在宽度允许，没有遮挡的情况下上浮)

元素定位后生成一个块级框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        #div-1{
            width:200px;
            height: 200px;
            background-color: red;
            position:absolute;
            top:50px;
            left:50px;
        }
        #div-2{
            width:200px;
            height:200px;
            background-color: green;
        }
        #div-3{
            width:200px;
            height:200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>
        <div id="div-1">div-1</div>
        <div id="div-2">div-2</div>
        <div id="div-3">div-3</div>
    </div>
</body>
</html>

3.4.3固定定位

固定定位是以浏览器作为窗口参照物来定义网页元素的。

当对元素设置固定定位后，该元素将脱离标准文档流的控制，始终依据浏览器窗口左上角来定义自己的显示位置。不论浏览器滚动条如何滚动，浏览器窗口如何变化，该元素始终显示在浏览器窗口的固定位置。

如下如，csdn中的猴子就是用的固定定位属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        div{
            width: 330px;
            height: 100px;
            background-color: bisque;
            position: fixed;
            right: 0px;
            top:300px;
        }
    </style>
</head>
<body>
    <div>
        天选姬
    </div>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
</body>
</html>

3.5浮动

3.5.1概述

浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边缘为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。

3.5.2浮动属性

3.5.2.1float属性

CSS中，通过float属性实现元素的浮动，并定义在哪个方向上浮动。

CSS中任何元素都可以浮动，并且浮动元素会生成一个块级框。

                                                float属性值及说明
属性值说明
left向左浮动
right向右浮动
none默认值。元素不浮动，并会显示在其文本中出现的位置
inherit规定应该从父元素继承float属性的值
3.5.2.2clear属性

clear属性规定元素的哪一侧不允许出现浮动元素。在CSS中是通过自动为清除元素（即设置了clear属性的元素）增加上外边距实现的。

img{
    float:left;/*左浮动*/
    clear:both;/*左右两侧都不允许出现浮动*/
}

四、盒子模型

4.1概述

主要有三大属性：边框、内边距、外边距

4.2边框

边框相关属性

        border-style:solid,double,dashed,dotted

        border-color

        border-width

4.3内边距

内边距相关属性

        padding-left

        padding-right

        padding-top

        padding-bottom

内边距改变会撑大框，所以一般不建议使用，最好使用margin

4.4外边距

外边距相关属性

        相对于父级元素定位

        margin（top；right；bottom；left）四个方向的距离

        margin-top

        margin-bottom

        margin-left

        margin-right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子</title>
    <style>
        #div-1{
            width: 400px;
            height: 400px;
            border: blue solid 2px;
            margin-top: 100px;
            margin-left: 300px;
        }
        #div-2{
            width: 300px;
            height: 300px;
            /*单独设置某个样式*/
            /* border-color: red;
            border-style: solid;
            border-width: 2; */
            /*设置三个样式*/
            border: red solid 2px;
            /*单独某一边*/
            /* border-right: red solid 2px; */
            padding-left: 10px;
            padding-top: 10px;
            /* float: left;由此可看出，padding内边距会撑大，不建议使用 */
            margin-top: 100px;
            margin-left: 300px;
        }
    </style>
</head>
<body>
    <div id="div-1">
        <div id="div-2">天选姬</div>
        <!-- <div style="width:300px;height: 300px; border: blue solid 2px;"></div> -->
    </div>
    
</body>
</html>

Hygge666666
关注
  • 13
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
蓝旭V6刷机工具
12-29
2.解压刷机制作工具PhoenixCard_V309.rar，打开里面的PhoenixCard.exe程序。 打开后 3.接上SD卡程序会自动识别，识别后在盘符位置会显示对应的盘符。 4.点击镜像文件选择下载好的刷机包 5.选择烧录，其他的不用...
MauiMETA工具V6
01-17
mtk的maui工具，比较新的，射频和校准相关的
蓝旭24春季培训-第一周预习-CSS进阶+设计
2303_80228948的博客
03-30 703
关于css的进阶及设计，如css的伪类、伪元素，关系选择器、网站布局、盒模型等
蓝旭工作室第二周预习：CSS进阶＋设计
2301_80479127的博客
03-30 705
CSS布局主要是盒子模型的应用，而定位则由不同的定位机制实现。这是一个典型页面的盒子模型页面元素的大小边框与其他元素的距离文档流flow浮动定位float层定位layer。
蓝旭春季培训前端预习第二周——CSS进阶＋设计
2301_81489161的博客
03-30 1050
蓝旭春季培训前端预习第二周——CSS进阶＋设计
第二周 蓝旭培训预习CSS进阶
2301_81318560的博客
03-30 643
当一个元素有焦点的时候匹配匹配兄弟元素中的元素（可以是非同类元素）兄弟元素按照an+b形式的式子进行匹配匹配某种类型的一列兄弟元素兄弟元素按照an+b形式的式子进行匹配匹配一列兄弟元素（可以是非同类元素），从后往前倒数兄弟元素按照an+b形式的式子进行匹配匹配诸如<input>元素处于可用状态的元素匹配当前URL目标的元素（例如如果它有一个匹配当前URL分段的元素）。
蓝旭前端预习3之CSS进阶
2201_75663851的博客
04-07 379
盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。这里盒子与 中的盒子又有点不同，这里的盒子是二维的。
cc蓝旭第三周——CSS进阶（盒子模型、浮动、定位、伪类、伪元素）
m0_74033724的博客
04-07 529
cc蓝旭第三周——CSS进阶（盒子模型、浮动、定位、伪类、伪元素）
蓝旭第二周预习博客
2301_80049611的博客
03-30 1289
盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。在CSS中，绝对单位定义的大小是固定的，使用的是物理度量单位，显示效果不会受到外界因素影响。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。是CSS3新引入的单位。全称pixel，指的是一张图片中最小的点，或者是计算机屏幕中最小的点。在CSS中，相对单位定义的大小是不固定的，一般是相对其他长度而言。
蓝旭第四周预习作业
2301_81273759的博客
04-13 809
使用方法通过元素的 ID 属性获取元素。注意：ID是唯一的下面将简略显示 用ID元素获取得到一个是文字变成红色的按钮。
蓝旭工作室2023春季培训预习博客（三）
D1gnity_的博客
04-06 348
第三周有一个需了解的内容，如下CSS进阶（盒子模型、浮动、定位、伪类、伪元素）CSS伪类是用来描述一个元素的特殊状态，比如第一个元素、某个元素的子元素、鼠标点击的元素设置鼠标悬停在元素上时的样式。为已访问和未访问链接设置不同的样式。设置元素获得焦点时的样式。
CSS实现经典打字小游戏《生死时速》
坚信万物皆可切的切图仔
06-11 1122
游戏开始后，警察在3秒后开始出动，如果警察抓到小偷（位置重合）即游戏失败。你需要根据页面底部的对话正确输入单词，即可让小偷不断运动，拉开与警察的距离，如果在输入全部对话前没有被警察逮到，即闯关成功。整个游戏其实实现起来很简单，只需要在设置offset路径动画的基础上加一点点细节就完成了。学如逆水行舟，不进则退～
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
最新发布
一起coding，一起嗨。
06-15 251
HTML基础标签解析：H1-H6、DIV与P的正确使用方法
css display:grid布局，实现任意行、列合并后展示，自适应大小屏幕
qq_43053533的博客
06-12 345
此时会生成如图1所示的42个格子，让用户去勾选格子合并，合并逻辑后端完成。现有6X7列的一个布局，如下图所示。首先循环出42个格子，js代码。
HTML实现进度条/加载框模版
joe_g12345的博客
06-09 634
【代码】HTML实现进度条/加载框模版。
如何判断 是否 需要 CSS 中的媒体查询
Keep trying, keep going
06-10 1368
使用现代的布局技术：如果你正在使用 Flex 布局或 Grid 布局，这些布局技术本身就具有很强的自适应能力，可能无需或只需很少的媒体查询就能实现响应式布局。设计非响应式的网站：如果你正在设计一个固定宽度的网站，而且不打算让它在不同的设备和屏幕尺寸上有不同的表现，那么你可能不需要使用媒体查询。内容简单的页面：如果你正在设计一个内容非常简单的页面，例如一个只包含少量文本和图片的静态页面，那么你可能不需要使用媒体查询。响应式布局：当设备的屏幕尺寸变化时，我们可以使用媒体查询来调整布局，以适应不同的屏幕尺寸。
uniapp使用css实现瀑布流
qq_45623072的博客
06-12 730
title:"大佬点的黑桃全家桶，今晚不醉不归，大干下一场，大家一起来!//当属性值为3，表示超出3行隐。title:"哈哈哈，好可爱的小女孩,打不过...",title:"两个月的布偶猫怎有这么小吗?title:"落日好美，你喜欢吗？title:"这样的礼物你喜欢吗?title:"这样的礼物你喜欢吗?author:"不懂的茄子",author:"椰子哦",author:"快乐样",author:"奈奈酱",author:"椰子哦",
前端学习CSS之神奇的块浮动
谜语人的博客
06-11 520
在盒子模型的基础上就可以对网页进行设计不知道盒子模型的可以看前面关于盒子模型的内容而普通的网页设计具有一定的原始规律,这个原始规律就是文档流。
Html_Css问答集(5)
白话魔法师
06-14 599
html与css学习中的一些疑问，问答中轻松获取知识。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值