浅学CSS3

最新推荐文章于 2024-11-08 18:54:37 发布
最新推荐文章于 2024-11-08 18:54:37 发布
阅读量135 收藏
点赞数
分类专栏： Web 文章标签： css3 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/innocentboyyy/article/details/120825633
版权
这篇博客详细介绍了CSS3的基础知识，包括入门、三种导入方式、基本选择器、美化网页元素、盒子模型和定位等内容。重点讲解了基本选择器如标签选择器、类选择器和ID选择器，以及浮动、定位的概念和使用方法。此外，还提到了CSS3的美化技巧，如文本样式、超链接伪类和背景设置。
摘要由CSDN通过智能技术生成

CSS 指的是层叠样式表* (Cascading Style Sheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中

CSS3

1. 入门

<!--	 
	语法：
        选择器：{
            声明1;   
            声明2;   
            声明3;
    }
-->

两种写法：

  • 直接在html中写css代码，必须写在style的标签中，而且style必须在head当中
  • 单另写在css的文件中，但是必须在html的head中使用link标签，标明css的地址##

2. css的三种导入方式

  • 行内样式：
<h1 style="color: red">我是标题</h1>

直接在标题标签中添加一个style标签

  • 内部样式
<style>
    h1{
       color:green;
    }
</style>

在html的head头部中写

  • 外部样式
<link rel="stylesheet" href="css/style.css">

h1 {
    color:blue;
}

在外部的css文件中写，需要注意：在html文件中必须使用link标签表明css文件的地址

执行顺序：行内样式最优先，内部样式和外部样式看他们在head中的位置，位置靠后的先执行，就近原则谁距离h1标签近，谁就先执行

3. css的基本选择器

作用：可以选择上页面上的某一个或者某一类元素

3.1 基本选择器

  1. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器：会选择到页面上所有这个标签的元素*/
        h1 {
            color: #d9d270;
        }

        p {
            color: #10bed5;
        }
    </style>
</head>
<body>
<h1>刘艺！！！</h1>
<h1>刘艺！！！</h1>
<p>狂神！！！</p>
</body>
</html>

语法： 标签名{} 缺点：不能进行单个选择

  1. 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器：会选择到页面上对应的标签，还可以实现复用*/
        .liuyi {
            color: #e86060;
        }

        .shuaige {
            color: #5ccece;
        }
    </style>
</head>
<body>
<h1 class="liuyi">刘艺！！！</h1>
<h1 class="shuaige">刘艺！！！</h1>
<p>狂神！！！</p>
</body>
</html>

语法：.class{} 优点：可以细分选择，也可以实现复用 命名不能以数字开头

  1. id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #liu1 {
            color: #5ccece;
        }
        #liu2 {
            color: #d9d270;
        }
    </style>
</head>
<body>
<h1 id="liu1">标题1</h1>
<h1 id="liu2">标题2</h1>

</body>
</html>

语法：#id{} 注意点：id必须唯一，不能重复！ 命名不能以数字开头

选择器执行顺序和位置无关：id选择器 > class选择器 > 标签选择器

3.2 层次选择器

  1. 后代选择器
/*后代选择器*/
body p {
    background: #e86060;
}

body p{} body下的所有P标签都会改变

  1. 子选择器
/*子选择器*/
body>p {
    background: #5ccece;
}

body>p{} 会选中body的儿子（不包括儿子以下的孙子啥的）

  1. 相邻兄弟选择器（弟弟选择器）
/*相邻兄弟选择器*/
.active + p {
    background: aquamarine;
}

.class + p{}

  1. 通用选择器（所有弟弟选择器）
/*通用选择器*/
.active~p {
    background: cadetblue;
}

.class~p{} 会选中所有的弟弟

3.3 结构伪类选择器

/*ul的第一个元素*/
ul li:first-child{
    background: gold;
}
/*ul的最后一个元素*/
ul li:last-child {
    background: #e86060;
}

/*选中p1 : 选中P父元素，选中父元素的第一个子元素，按顺序选择*/
p:nth-child(1) {
    background: red;
}

/*选中父元素，下的P元素的第二个，按类型选择*/
p:nth-of-type(2) {
     background: #10bed5;
}

伪类：一些筛选条件（带冒号的开头）

3.4 属性选择器

标签名[属性名 = 属性值] {} eg:a[id = first]{}

其中属性值可以使用正则表达式

= 绝对等于

*= 包含这个元素的元素

^= 以这个开头的元素

$= 以这个结尾的元素

4. 美化网页元素

作用：

  1. 有效的传递页面信息
  2. 美化页面，页面漂亮，才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

4.1 span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title {
            font-size: 50px;
        }
    </style>

</head>
<body>

欢迎学习 <span id="title">java</span>

</body>
</html>

重点要突出的子，使用span套起来（一种约定）

4.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    font-family: 设置字体样式
    font-size:   设置字体大小
    font-weight: 设置字体粗细
    color：      设置字体颜色
    -->

    <style>
        body{
            font-family: "Arial Black",楷体;
            color: #417979;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bolder;
            font-size: 20px;
        }
    </style>
</head>
<body>
<h1>背景介绍</h1>
<p class="p1">
    《灵笼》是艺画开天、bilibili联合出品的原创网络动画作品，由艺画开天担任制作。上半季于2019年7月13日起在bilibili独家播出，下半季（终章上、下）于2021年5月1日播出。全7话。
</p>
<p class="p2">
    《灵笼》讲述的是地球经历一场毁灭性的浩劫，幸存的人类不得不避难于一座悬浮于空中的灯塔上，继而面对善恶对立、是非难辨等种种矛盾的故事。
</p>
<p>
    She saw scars and bruises on her body.Tears fell on the wounds.This wasn’t the 1st time he abused and hit her.She decided to end life.Took a knife and went to the bedroom.She came outside with blood all over her face,But this is the 1st time it wasn’t her blood.
</p>
</body>
</html>

font-family: 设置字体样式
font-size: 设置字体大小
font-weight: 设置字体粗细
color： 设置字体颜色

4.3 文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐方式 text-align: center;
  3. 首行缩进 text-indent: 2em;
  4. 行高 line-height: 50px;
  5. 装饰 text-decoration: underline; (操作下划线)
  6. 文本图片水平对齐 vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    text—align: 文字排版，居中……
    text—indent： 段落首行缩进
    行高，和块的高度一致，可以实现上下居中
    -->
    <style>
        h1 {
            color: lightpink;
            text-align: center;
        }
        .p1 {
            text-indent: 2em;
        }
        .p3 {
            background: cornsilk;
            height: 100px;
            line-height: 50px;
        }
        /*下划线*/
        .l1 {
            text-decoration: underline;
        }
        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }
        /*上划线*/
        .l3 {
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">12345</a>
<p class="l1">111111111</p>
<p class="l2">222222222</p>
<p class="l3">333333333</p>
<h1>背景介绍</h1>
<p class="p1">
    《灵笼》是艺画开天、bilibili联合出品的原创网络动画作品，由艺画开天担任制作。上半季于2019年7月13日起在bilibili独家播出，下半季（终章上、下）于2021年5月1日播出。全7话。
</p>
<p class="p2">
    《灵笼》讲述的是地球经历一场毁灭性的浩劫，幸存的人类不得不避难于一座悬浮于空中的灯塔上，继而面对善恶对立、是非难辨等种种矛盾的故事。
</p>
<p class="p3">
    She saw scars and bruises on her body.Tears fell on the wounds.This wasn’t the 1st time he abused and hit her.She decided to end life.Took a knife and went to the bedroom.She came outside with blood all over her face,But this is the 1st time it wasn’t her blood.
</p>
</body>
</html>

4.4 超链接伪类 文本阴影

  1. 鼠标悬停的颜色

    a:hover { }

  2. 文本阴影

    text-shadow: #10bed5 30px 30px ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a {
            text-decoration: none;
            color: cornflowerblue;
        }
        /*鼠标悬停的颜色*/
        a:hover {
            color: red;
            font-size: 20px;
        }
        /*鼠标按住未释放的颜色*/
        a:active {
            color: green;
        }
        /*文本阴影*/
        #price {
            text-shadow: #10bed5 30px 30px ;
        }
    </style>
</head>
<body>

<a href="#">
<img src="images/B$U6)AHNB47DL9C%5BIQ$OX0B.png" alt="">
</a>

<p>
    <a href="#">CSGO前职业队员，loveqq</a>
</p>
<p>
    <a href="">作者：刘艺</a>
</p>
<p id="price">
    $1999
</p>
</body>
</html>

4.5 列表操作

list-style:
	none 去掉原点
	circle 空心圆
	decimal 数字
  	square 正方形

4.6 背景

  • 背景颜色
  • 背景图片
<style>
    div {
         width: 1000px;
         height: 1000px;
         border: 2px solid red;
         background-image: url("image/QQ图片20200502193402.jpg");
            /*默认全部是平铺的*/
    }
    .div1 {
           background-repeat: repeat-x;
           background: ;
    }
    .div2 {
           background-repeat: repeat-y;
    }
    .div3 {
    	   background-repeat: no-repeat;
    }
</style>

background: 颜色，图片，图片位置，平铺方式

5. 盒子模型

5.1 盒子

  • margin：外边距 不手动设置会有默认值
  • padding：内边距
  • border：边框

5.2 边框

border：粗细，样式（solid实线，dashed虚线），颜色

    <style>
        #box {
            width: 300px;
            border: 1px solid red;
        }
        form {
            background: #417979;
        }
        h3 {
            background: #e86060;
            margin: 0;
        }
        div:nth-of-type(1) input {
            border: 10px solid lightsalmon;
        }
         div:nth-of-type(2) input {
            border: 10px dashed #16dbae;
        }
         div:nth-of-type(3) input {
            border: 10px solid lightsalmon;
        }
    </style>

<div id="box">
    <h3>用户登录</h3>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

5.3 内外边距

妙用： 可以实现div居中对齐

margin: 0 auto; 两个参数时，第一个为上下，第二个为左右

要求：块元素，块元素有固定的宽度

盒子的计算方式：你的这个元素到底多大

margin + border + padding + 内容宽度

5.4 圆角边框

<style>
    /*顺序为顺时针方向：左上，右上，右下，左下*/
    div {
         width: 100px;
         height: 100px;
         border: 5px solid red;
         border-radius: 10px 20px 30px 40px;
    }
</style>

border-radius: 左上，右上，右下，左下

5.5 盒子阴影

<style>
    div {
         width: 100px;
         height: 100px;
         border: 5px solid red;
         box-shadow: 10px 10px 100px #e86060;
     }
</style>

box-shadow 设置阴影（发光）: 10px 10px 100px #e86060

6. 浮动

6.1

块级元素：独占一行

h1~h6 p div 列表……

行内元素：不独占一行

span a img strong……

行内元素可以被包含在块级元素中，反之，则不可以

这是一种是先行内元素排版的方式，但是我们有很多情况都是用float

6.2 display

div {
    width: 100px;
    height: 100px;
    border: 1px solid #16dbae;
    display: inline;
}
span {
    width: 100px;
    height: 100px;
    border: 1px solid #16dbae;
    display: block;
}

display: inline行元素 /

​ block块元素 /

​ inline-block保持块元素的特性但能内联写在一行 /

​ none消失

方向不可控制

6.3 float（左右浮动）

float:left / right

让窗口浮动，根据网页界面变换自动调整位置

浮动起来会脱离标准文档流

6.4 父级边框塌陷问题

clear：

/*
clear: right;   右侧不允许有浮动元素
clear: left;    左侧不允许有浮动元素
clear: both;    两侧不允许有浮动元素
clear: none;
*/

解决方案：

  1. 增加父级元素的高度
#father{
    border: 10px solid #16dbae;
    height: 1500px;
}
  1. 增加一个空的div标签，清除浮动
<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}
  1. 在父级元素中增加一个overflow
#father{
    border: 10px solid #16dbae;
    overflow: auto;
}

auto：滚轮效果（超过父类边框时生成滚轮）

hidden：截取效果（超过父类边框时会截取，但是别的内容依然可见）

  1. 在父类添加一个伪类**(推荐)**
#father:after{
    clear: both;
    content: '';
    display: block;
}

7. 定位

7.1 相对定位 relative

相对自己原来的位置进行偏移

position：relative

相对于原来的位置，进行指定的漂移，原来的位置会被保留

position: relative;
top: -30px;
left: -10px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位：
                相对自己原来的位置进行偏移
    -->
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #e57a3f;
            padding: 0;
        }
        #first{
            border: 1px solid #5ccece;
            background: cornflowerblue;
            position: relative;
            top: -30px;
            left: -10px;
        }
        #second{
            border: 1px solid darkred;
            background: salmon;
        }
        #third{
            border: 1px solid #10bed5;
            background: #417979;
            position: relative;
            top: 20px;
        }
    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

7.2 绝对定位 absolute

定位：基于xxx定位，上下左右~

  1. 没有父级元素定位的前提下，性对于浏览器定位

  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3. 在父级元素范围内移动

相对于父级 / 浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 15px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #e57a3f;
            padding: 0;
            /*position: relative;*/
        }
        #first{
            border: 1px solid #5ccece;
            background: cornflowerblue;
        }
        #second{
            border: 1px solid darkred;
            background: salmon;
            position: absolute;
            right: 30px;
            top: 30px;
        }
        #third{
            border: 1px solid #10bed5;
            background: #417979;
        }
    </style>

</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

7.3 固定定位 fixed

固定定位：

固定定位使用后块就会固定在网页一个部分，不随着滚轮的上下移动而移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        div:nth-of-type(1) {/*绝对定位：相对于浏览器*/
            width: 100px;
            height: 100px;
            background: #5ccece;
            position: absolute;
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 100px;
        }
        div:nth-child(2) {/*fixed，固定定位*/
            width: 50px;
            height: 50px;
            background: #d550d3;
            position: fixed;
            bottom: 0;
            right: 0;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

7.4 z-index

z-index: 0/1/2/3/4

给模块设置图层，编号大的在上面

CoolboY61
关注
专栏目录
浅学CSS
m0_63640914的博客
08-06 1984
自己浅学css
浅学css
shiwangsp的博客
11-26 154
一、 盒子模型、盒子型、框模型（box model） ​ - CSS将网页中的所有元素都设置为了一个矩形的盒子 ​ - 将元素设置为矩形盒子后对页面的布局就变成将不同的盒子摆放到不同的位置 每一个盒子都有以下及格部分组成 内容区（content） 内边框（padding） 边框（border） 外边框（margin） 内容区（content），元素中所有的子元素和文本内容区都在内容区排列 ​ 内容区的大小由width和heigth两个属性来设置 ​ width 设置内容
【CSS】浅学一下filter
weixin_50863323的博客
01-04 1370
我们一般采用box-shadow属性，通过box-shadow(x偏移，y偏移，模糊大小，阴影大小，色值，inset)的语法形式很容易为元素添加阴影效果，但box-shadow在给透明图片添加阴影效果时无法穿透元素，只能把阴影加在透明图片元素的盒模型上。在做紧急置灰网页需求时，上线一段时间往往需要撤掉这个功能，我们还可以在首次上线时添加以下类似的方法，来控制置灰效果的自动上下线时间，这样到达预定时间就可自动撤去，不用走两次施工流程。发生重大灾害事故或其它哀悼日时，国企政府网站往往有网页全部置灰的需求。
小白浅学Vue3
weixin_47268883的博客
01-14 1008
小白浅学Vue3
浅学 --------- CSS
L0g1c的博客
06-16 270
1、CSS 指层叠样式表 (Cascading Style Sheets)2、样式定义如何显示 HTML 元素3、样式通常存储在样式表中4、外部样式表可以极大提高工作效率5、外部样式表通常存储在 CSS 文件中6、多个样式定义可层叠为一个HTML 标签原本被设计为用于定义文档内容，如下实例： 样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。CSS声明总是以分
浅学爬虫-HTML和CSS结构
LS_Ai的博客
07-30 1306
HTML（HyperText Markup Language）是构建网页的基础语言。它通过标签（Tags）来定义网页的结构和内容。HTML文档的基本结构如下： 基本标签介绍:其他常用标签:CSS（Cascading Style Sheets）用于控制HTML文档的样式。选择器是CSS中用于选取元素的模式。常见的CSS选择器包括： 类选择器: 选取具有指定类属性的所有元素，类名以开头。 ID选择器: 选取具有指定ID属性的元素，ID名以开头。 属性选择器: 选取具有指定属性的元素。
6.17HTML+CSS
weixin_71525091的博客
06-18 577
今日的简单概念-- 块级元素 -->-- 1.会独占一整行 -->-- 2.可以设置宽度高度 -->-- 3.块级元素里面可以容纳任意的元素和内容 -->例： -- 1.不会独占一行 -->-- 2.不可以设置宽度高度 -->-- 3.行内元素里只能容纳文本和图片和其他的行内元素 -->例： -- 不会独占一行 -->-- 可以设置宽度高度 -->-- 里面可以容纳任意的元素和内容 -->例：
浅学 ------- HTML笔记
L0g1c的博客
06-15 290
HTML是一种超文本标记语言，有一套标记标签，用来描述网页。HTML文档也叫做web页面HTML标签 是由尖括号包围的关键词，比如；通常是成对出现的，比如和；第一个是开始标签（开放标签），第二个是阶数标签（闭合标签）“HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思.但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签 HTML 段落 HTML 链接 **提示：**在 href 属性中指定链接的地址。 **注意：**图片的名称和尺寸是以属性的形式提供的HTML文档由HTML元素定
浅学bootstrap框架
qq_42241873的博客
02-18 344
在菜鸟教程学习bootstrap，然后做的一个与音乐相关的网页，登录注册部分借助模态框和表单实现，界面挺美观，html+css+js都在一个html文件中
xml浅学笔记
05-15
3、XML的标记也允许被嵌套，注意嵌套顺序 4、每个标记都允许自定义属性，格式与HTML一致，但属性值，必须用""括起来 5、每个XML文档中必须要有一个跟元素 3、使用AJAX 请求 XML 文档 1、要遵循AJAX的请求步骤 ...
浅学二极管与三极管
06-24
### 浅学二极管与三极管 #### 一、二极管基础 ##### 1.1 PN结概述 二极管的核心是**PN结**。**PN结**是通过特殊的制造工艺，在同一块半导体材料（通常是硅或锗）上，通过扩散作用将**P型半导体**和**N型半导体**...
【自动驾驶】浅学一下BEV目标检测记录
聿默的博客
06-16 306
现在BEV与OCC占用网络非常火，在日常工作中，如果没有接触到，可能会忽略相应的知识储备。本人还未看大量文献，所以只能算浅学下记录，这里主要从互联网上学习到的，还是就是跟专业的同事请教之后，自己总结的。
浅学AQS
vividcycle的博客
11-24 210
AQS（AbstractQueuedSynchronizer）
巨好看的登录注册界面源码
bjzhang75的博客
10-31 3825
巨好看的登录注册界面源码
CSS3中的3D变换（3D空间与景深、透视点的位置、3D位移、3D旋转、3D缩放、3D多重交换、背部可见性）
最新发布
yyyyyyysc的博客
11-08 58
CSS3中的3D变换（3D空间与景深、透视点的位置、3D位移、3D旋转、3D缩放、3D多重交换、背部可见性）
CSS3中的2D变换（位移、缩放、旋转、扭曲、多重变换、变换原点）
yyyyyyysc的博客
11-08 109
CSS3中的2D变换（位移、缩放、旋转、扭曲、多重变换、变换原点）
请解释一下HTML5和CSS3的一些重要特性，并说明你在页面重构方面的能力和经验。
2301_81121233的博客
11-07 497
1.**语义标签**：HTML5引入了新的语义标签，如``、``、``、``和``，这些标签有助于提升网页的结构性和可访问性。2.**表单控件**：提供了新的表单控件类型，如`date`、`time`、`email`和`url`，以及新的输入验证属性，如`required`、`max`和`min`。5.**离线应用**：使用`applicationcache`和`serviceworkers`可以创建无需网络即可访问的应用程序。
CSS3新增边框属性（五）
。
11-01 625
介绍CSS3新增边框属性以及用法。
js实现漂亮的注册页面（js动态注册页面）
yyyyyyysc的博客
11-04 505
js实现漂亮的注册页面（js动态页面）
静态方法中使用jdbctemplate_JdbcTemplate浅学
06-13
3. 在使用JdbcTemplate操作数据库时，需要注意线程安全问题。JdbcTemplate是线程安全的，但是需要保证JdbcTemplate实例的线程安全，即在多线程环境中需要保证同一JdbcTemplate实例不会被并发访问。 下面是一个示例...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值