前端学习——CSS学习笔记（四）

已于 2022-10-05 19:02:11 修改
阅读量617 收藏 2
点赞数 2
文章标签： 前端 css 学习
于 2022-10-05 17:06:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53114527/article/details/127169162
版权

提示：文章根据学习情况进行记录

目录

一、结构伪类选择器

二、伪元素

三、标准流

四、浮动

五、清除浮动

1.清除浮动的方法一直接设置父元素高度

2.清除浮动的方法一额外标签法

3.清除浮动的方法一单伪元素清除法

4.清除浮动的方法—双伪元素清除法

5.清除浮动的方法一给父元素设置overflow : hidden

总结

一、结构伪类选择器


目标:能够使用结构伪类选择器在HTML中定位元素

1.作用与优势:
   1．作用:根据元素在HTML中的结构关系查找元素

   2．优势:减少对于HTML中类的依赖，有利于保持代码整洁

   3.  场景:常用于查找某父级选择器中的子元素

2.选择器

 代码试验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中第一个 */
        /* li:first-child{
            background-color: green;
        } */
        /* 选中最后一个 */
        /* li:last-child{
            background-color: blue;
        } */
        /* 选中第六个 */
        /* li:nth-child(6){
            background-color: red;
        } */
        /* 选中倒数第二个 */
        li:nth-last-child(2){
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- ul>li{这是第$个li}*8 -->
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

  3.注意点

      1. n为：0、1、2、3、4、5、6、……
       2. 通过n可以组成常见公式

代码试验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 偶数 */
        /* li:nth-child(2n){
            background-color: green;
        } */
        /* 奇数 */
        /* li:nth-child(2n+1){
            background-color: green;
        } */
        /* 前5个 */
        /* li:nth-child(-n+5){
            background-color: green;
        } */
        /* 4的倍数 */
        li:nth-child(4n){
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

二、伪元素

目标： 能够使用 伪元素 在网页中创建内容
➢ 伪元素： 一般页面中的非主体内容可以使用伪元素
➢ 区别：
1. 元素：HTML 设置的标签
2. 伪元素：由 CSS 模拟出的标签效果
➢ 种类：

➢ 注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素
小结
➢ 伪元素的必加属性是？
• content属性
➢ 伪元素创建出来后默认的显示模式是？
• 行内元素

代码试验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .father::before{
            /* 内容 */
            /* content属性必须添加，否则伪元素不生效 */
            content: "老鼠";
            color: green;
            widows: 100px;
            height: 100px;
            background-color: blue;
            /* 默认是行内元素，宽高不生效 */
            display: block;
        }
        .father::after{
            content:"大米";
        }
    </style>
</head>
<body>
    <!-- 伪元素 通过css创建标签，装饰性不重要的小图 -->

    <!-- 找父级，在这个父级里面创建了标签 -->
    <div class="father">爱</div>
    <!-- 老鼠爱大米 -->
</body>
</html>

三、标准流

目标： 能够认识 标准流 的默认排布方式及其特点
➢ 标准流：又称 文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
1. 块级元素：从上往下， 垂直布局 ，独占一行
2. 行内元素 或 行内块元素：从左往右， 水平布局 ，空间不够自动折行
小结
➢ 标准流中块级元素的排版规则是？
• 从上往下、 垂直布局 、独占一行
➢ 标准流中行内元素或行内块元素的排版规则是？
• 从左往右、 水平布局 、空间不够自动折行

四、浮动

目标： 能够认识使用 浮动的作用 ，了解 浮动的特点
➢ 浮动的作用是什么？
1. 早期作用：图文环绕
2. 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
➢ 左浮动的属性是？右浮动的属性是？
1. 左浮动： float : left
2. 右浮动： float : right
代码试验 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* img{
            float: left;
        } */

        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: pink;
            float: left;
        }
        .two{
            background-color: aqua;
            float: left;
        }
    </style>
</head>
<body>
    <!-- 1.图文环绕 -->
    <!-- <img src="./images/1.jpg" alt="">大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。最后我认为作为一名大学生，更应该书写大写的人生，时时刻刻与国家同呼吸，共命运。我们要在这场战役中学习谱写“大写的青春”让青春梦想在中华民族复兴的伟大的中国梦中绽放。大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。大写的青春里应有大写的家国情怀，让青春走出孤芳自赏的小我，把自己的小我融入祖国的大我、人民的大我，与时代同步伐、与人民共命运。大写的青春用读书积蓄力量，用拼搏昭示希望。最后我认为作为一名大学生，更应该书写大写的人生，时时刻刻与国家同呼吸，共命运。我们要在这场战役中学习谱写“大写的青春”让青春梦想在中华民族复兴的伟大的中国梦中绽放。 -->



    <!-- 2.网页布局：块在一行排列 -->
    <div class="one">one</div>
    <div class="two">two</div>

</body>
</html>

浮动的特点
1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
     • 相当于从地面飘到了空中
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果
   • 一行可以显示多个
   • 可以设置宽高
➢ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto

代码试验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*浮动的标签顶对齐*/
        /*浮动:在一行排列，宽高生效--浮动后的标签具备行内块特点*/
        .one{
            width: 100px;
            height: 100px;
            background-color:pink;
            float: left;
            margin-top: 50px;
        }
        .two{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        
        }
        .three{
            width: 300px;
            height: 300px;
            background-color:orange;
        }
    </style>
</head>
<body>
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>

</body>
</html>
小结
➢ 浮动元素的特点有哪些？
1. 浮动元素会脱标，在标准流中不占位置
2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高

五、清除浮动

1.清除浮动的方法一直接设置父元素高度

>特点:
·优点:简单粗暴，方便
·缺点:有些布局中不能固定父元素高度。如:新闻列表、京东推荐模块

2.清除浮动的方法一额外标签法

>操作:
1.在父元素内容的最后添加一个块级元素2.给添加的块级元素设置clear:both特点:
·缺点:会在页面中添加额外的标签，会让页面的HTML结构变得复杂

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .clearfix {
            /* 清除左右两侧浮动的影响 */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

3.清除浮动的方法一单伪元素清除法

>操作:用伪元素替代了额外标签
1∶基本写法

2∶补充写法

>特点:
·优点:项目中使用，直接给标签加类即可清除浮动
案例代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素清除浮动 和 额外标签法原理是一样的 */
        .clearfix::after {
            content: '';

            /* 伪元素添加的标签是行内, 要求块 */
            display: block;
            clear: both;

            /* 为了兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 通过css 添加标签 -->
    </div>
    <div class="bottom"></div>
</body>
</html>

4.清除浮动的方法—双伪元素清除法

>操作:


特点:
·优点:项目中使用，直接给标签加类即可清除浮动

 案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /*  .clearfix::before 作用: 解决外边距塌陷问题
            外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
        */
        /* 清除浮动 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            /* content: '';
            display: table; */
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>

5.清除浮动的方法一给父元素设置overflow : hidden

操作:
1.直接给父元素设置overflow : hidden特点:
·优点:方便

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;

            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>
</html>
（拓展补充）BFC的介绍
➢ 块格式化上下文（Block Formatting Context）：BFC
•
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
➢ 创建BFC方法：
1. html标签是BFC盒子
2. 浮动元素是BFC盒子
3. 行内块元素是BFC盒子
4. overflow属性取值不为visible。如：auto、hidden…
5. ……
➢ BFC盒子常见特点：
1. BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
2. BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
3. ……

总结

◆ 能够使用 结构伪类选择器 在HTML中选择元素
◆ 能够说出 标准流 元素的布局特点
◆ 能够说出 浮动元素 的特点
◆ 能够使用浮动完成 小米模块布局案例
◆ 能够说出 清除浮动 的目的，并能够使用 清除浮动的方法
羙橘
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端Content-Type详解
chhaha_yes的博客
08-28 3637
前端http请求头中的Content-Type属性 Content-Type用来表示请求中发送中数据类型信息 Content-Type的格式为：type/subtype(;parameter)? type type:表示主类型，可以是任意的字符串，如text。 subtype:表示子类型，如html。 parameter:表示参数，可写可不写。如Accept请求头的参数，常见的有charset=‘utf-8’. 例如：Content-Type:text/html;charset:utf-8; Content
前端篇-Content-Type 详解
qadnkz的专栏
03-27 2693
Content-Type（MediaType），即是Internet Media Type，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千中不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。
CSS中content属性的作用
最新发布
My_wife_QBL的博客
07-10 583
在网页设计和开发中，CSS的content属性是一个非常强大且灵活的工具，它允许开发者动态地生成内容并插入到网页中。content属性主要与伪元素（pseudo-elements）如::before和::after一起使用，但也可以在其他上下文中发挥作用。本文将详细介绍content属性的作用、用法以及一些实际应用场景，并通过实例帮助读者更好地理解和应用。
Web前端优化最佳实践之Content篇
dknypxt的专栏
08-11 1152
<br />原文:http://www.bopor.com/?p=1073<br /> <br />1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条，可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析，有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求： * 1) 合并文件 ，比如把多个 CSS 文件合成一个； * 2) CSS Sprites 利用 CSS background 相关元素
前端教程分享：HTTP请求Content-Type你知道是做什么的吗？
xiaoxijinger的博客
05-07 874
细心的同学肯定都在网页的头部发现过一个Content-Type标签，你只知道是用来做HTTP请求的但你并不知道它究竟都能干什么，下面小千就来带你了解一下Content-Type。 1、概念 Content-Type表示内容类型和字符编码。内容类型也叫做MIME类型。是Internet Media Type，互联网媒体类型。在互联网上传输的数据有不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。 请求头中的content-type，就是 B端发给S端的数据类型描
CSS中的content属性
玖年
09-14 1595
css中的content常用来和:after及before伪元素选择器一起使用,在选择的对象前或后显示指定内容 content后可以加的内容有以下几种: attr(alt)
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
【狂神Java学习笔记——前端入门——HTML、CSS、JavaScript学习代码】是针对初学者的一份详实的学习资料，这份笔记记录了跟随B站知名up主“遇见狂神说”的java系列视频中关于前端开发的基础内容。笔记内容不仅与视频...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
学习笔记（一）——邂逅Vuejs
01-08
学习前提：需要具备一定的HTML、CSS、JavaScript基础 3.Vue.js安装 (1)直接CDN引入 (2)下载和引入 开发环境：https://vuejs.org/js/vue.js 生产环境：https//vuejs.org/js/vue.min.js 第一步：浏览器输入：...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
黑马前端css笔记.zip
08-14
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
详解CSS 伪元素及Content 属性
09-22
本文讲讲述伪元素以及功能强大的Contet属性，文章通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
伪元素中content的用法详解
小白程序员的博客
09-28 1万+
content:""----->扩展 (1)content的值可以是文字和字符串啦 然后加在它的""里面哦 (2)content还可以是图片，没想到，你会想，这图片怎么加呢，上代码 <a href="http://www.baidu.com" style="color: red"> 这是链接&nbsp;&nbsp; </a> 在css样式中加上如下...
Web前端——CSS伪类和伪元素
qq_25592087的博客
09-27 1672
可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}
【CSS】属性content有什么作用呢？有哪些场景可以用到？
热门推荐
前端向朔
05-08 1万+
认识 :before 和 :after 默认 display: inline； 必须设置 content 属性，否则一切都是无用功， content 属性也只能应用在 :before 和 :after 伪元素上； 默认user-select: none，就是 :before 和 :after 的内容无法被用户选中； 伪元素可以和伪类结合使用形如：.target:hover:after。 :bef...
伪类选择器的用法
qq_39861152的博客
09-19 1187
:first-child 选择某个元素的第一个子元素（IE6不支持） :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type [CSS3]选择一个上级元素的最后一个同类子元素 :only-child [CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持） :only-of-ty...
php事件标签,HTML标签伪元素绑定事件的三种方式
weixin_39907157的博客
03-18 72
本篇文章给大家带来的内容是关于HTML标签伪元素绑定事件的三种方式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近项目中遇到点击一个图标执行某些操作的功能，本来很简单就能实现，但图标却是 ::after 伪元素实现的，在印象中好像不能直接对伪元素进行 dom 操作，可项目中有所有页面都是通过伪元素来展示图标的，将所有页面中图标改成 DOM 元素也不太可行。在网上查了下，大部分都...
html中content属性,CSS3的content属性详解
weixin_33673142的博客
06-05 9164
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:这是h1这是h2cssh1::after{content:"h1后插入内容"}h2::after{content:...
CSS入门与HTML5元素详解——第1天笔记
在"CSS第1天笔记"中，本课程作为前端与移动开发学院的基础课程，旨在引导学员快速入门CSS，总共涵盖6天的学习内容。第一天主要回顾了HTML基础知识，并介绍了CSS的基本概念和应用。 首先，回顾了HTML的基本元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值