Web前端 学习笔记6（浮动）

最新推荐文章于 2024-05-06 12:21:01 发布
最新推荐文章于 2024-05-06 12:21:01 发布
阅读量493 收藏 2
点赞数
分类专栏： Web前端 文章标签： html5 html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu_yongheng/article/details/113803993
版权

在大致学习完布局之后，现在开始了解下一个知识点：浮动！浮动，字面意思就是使元素浮起来，从而完成元素的布局。

目录

知识点学习

浮动有很多特点以及使用，下面分为几个点来分别学习。

1、浮动的简介

通过浮动可以使一个元素向其父元素的左侧或者右侧移动就是浮动最基本的作用。

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: royalblue;

            /* 
                通过浮动可以使一个元素向其父元素的左侧或者右侧移动
                    使用float 属性来设置元素的移动
                        可选值：
                            none 默认值，元素不浮动
                            left 元素向左浮动
                            right 元素向右浮动

                    注意：设置浮动以后，水平布局的等式便不需要强制成立
                        元素设置浮动以后，会完全从文档流中脱离，不再占用文档流中的位置
                            所以元素下边的还在文档流中的元素会自动向上移动

                    浮动的特点：
                        1、浮动元素会脱离文档流，不占用文档流中的位置
                        2、设置浮动以后，元素会向左侧或者右侧移动
                        3、浮动元素默认不会从父元素中移出
                        4、浮动元素向左或向右移动时，不会超过它前边的其他浮动元素

                    简单总结：
                        浮动目前来讲它的作用就是让页面中的元素可以水平排列，
                            通过浮动可以制作一些水平方向的布局
             */
            float: left;
        }

        .box2{
            width: 300px;
            height: 300px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    
</body>
</html>

2、浮动的其他特点

元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化。

<!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>
        *{
            margin: 0;
            padding: 0;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 
                浮动元素不会盖住文字，文字会自动环绕在浮动元素周围，
                    所以我们可以利用浮动来设置文字环绕图片的效果    
            */
            float: left;
        }

        .box2{
            background-color: yellow;
            
            /* 
                元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化

                脱离文档流的特点：
                    块元素：
                        1、块元素不会独占一行
                        2、脱离文档流以后，块元素的宽度和高度默认被内容撑开

                    行内元素：
                        行内元素脱离文档流以后会变成块元素，特点和块元素一样

                    脱离文档流以后，就不用区分块元素和行内元素了
             */
            float: left;
        }

        .box3{
            background-color: violet;
        }

        .s1{
            float: left;
            width: 200px;
            height: 200px;
            background-color: tomato;
        }


    </style>
</head>
<body>
    
    <div class="box1"></div>
    <p>
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”(励志名言大全 www.wenzhangba.com)

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <div class="box2">hello</div>
    <div class="box3">hello</div>

    <span class="s1">我是一个span</span>
</body>
</html>

3、网页的布局

在日常生活中的网页布局，很多都是利用浮动来实现的，下面的一个简单的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的简单布局</title>

    <style>
        header{
            width: 1000px;
            height: 150px;
            background-color: bisque;
            margin: 0 auto;
        }

        main{
            width: 1000px;
            height: 500px;
            background-color: rgb(155, 224, 15);
            margin: 10px auto;
            
        }

        nav{
            width: 190px;
            height: 100%;
            background-color: yellow;
            float: left;
        }

        article{
            width: 600px;
            height: 100%;
            background-color: teal;
            float: left;
            margin: 0 10px;
        }

        aside{
            width: 190px;
            height: 100%;
            background-color: pink;
            float: left;
        }

        footer{
            width: 1000px;
            height: 150px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    
    <!-- 创建头部 -->
    <header></header>

    <!-- 创建主体 -->
    <main>
        <!-- 左侧导航 -->
        <nav></nav>

        <!-- 中间的内容 -->
        <article></article>

        <!-- 右侧的边栏 -->
        <aside></aside>
    </main>

    <!-- 创建尾部 -->
    <footer></footer>
</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>
        .outer{
            border: 10px red solid;

            /* 
                BFC(Block Formatting Context)块级格式化环境
                    - BFC是CSS中一个隐含的属性，可以为一个元素开启BFC
                        开启BFC该元素会成为一个独立的布局区域
                    - 元素开启BFC的特点：
                        1、开启BFC的元素不会被浮动元素所覆盖
                        2、开启BFC的元素子元素和父元素外边距不会重叠
                        3、开启BFC的元素可以包含浮动的元素

                    - 可以通过一些特殊的方式开启元素的BFC：
                        1、设置元素的浮动（不推荐）
                        2、将元素设置为行内块元素（不推荐）
                        3、将元素的overflow设置为一个非visible的值
                            - 常用的方式，为元素设置 overflow: hidden 开启BFC 以使其可以包含浮动元素
             */
             /* float: left; */
             /* display: inline-block; */
             overflow: hidden;
        }

        .inner{
            width: 100px;
            height: 100px;
            background-color: aqua;

            /* 
                高度塌陷问题：
                    在浮动布局中，父元素的高度默认被子元素撑开，
                        当子元素浮动后其会完全脱离文档流，将无法撑起父元素的高度

                    父元素高度丢失以后，其下元素会自动上移
             */
            float: left;
        }
    </style>
</head>
<body>
    
    <div class="outer">
        <div class="inner"></div>
    </div>

</body>
</html>

5、BFC的演示

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfc;
            /* float: left; */
            overflow: hidden;
        }

        .box2{
            width: 200px;
            height: 200px;
            background-color: brown;
            overflow: hidden;
        }

        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    
    <div class="box1">

        <div class="box3"></div>
        
    </div>

    <!-- <div class="box2">

    </div> -->
</body>
</html>

6、clear

通过clear清除浮动元素对当前元素产生的影响。

<!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>
        div{
            font-size: 50px;
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfc;
            float: left;
        }

        .box2{
            width: 400px;
            height: 400px;
            background-color: tomato;
            float: right;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: teal;
            /* 
                由于box1的浮动，导致box3位置上移

                如果我们不希望某个元素因为其他元素浮动的影响而改变位置，
                    可以通过clear 属性来清除浮动元素对当前元素所产生的影响

                clear
                    - 作用：清楚浮动元素对当前元素产生的影响
                    - 可选值：
                        left 清除左侧浮动元素对当前元素的影响
                        right 清除右侧浮动元素对当前元素的影响
                        both 清除两侧最大影响的那一侧

                    原理：
                        设置清除浮动以后，浏览器会自动为元素添加一个 外边距，
                            使其位置不受其他元素的影响
             */

             clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    
</body>
</html>

7、after伪类解决高度塌陷

<!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>
        .box1{
            border: 10px red solid;

            /* overflow: hidden; */

        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: turquoise;
            float: left;
        }

        /* 通过after伪元素来解决 */

        .box1::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <!-- <div class="box3"></div> -->
    </div>
    
</body>
</html>

8、clearfix

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用这个类即可

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: turquoise;
        }


        /* 解决外边距重合 */
        /* .box1::before{
            content: '';
            display: table;
        } */

        .box2{
            width: 100px;
            height: 100px;
            background-color: wheat;
            margin-top: 100px;
        }


        /* 
            clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当遇到这些问题时，直接使用这个类即可
            这个类用来解决 高度塌陷 和 外边距重合
            记下来
         */
        .clearfix::before, 
        .clear::after{
            content: '';
            display: table;
            clear: both;
        }
    </style>

</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>

9、导航条练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            margin: 0;
            padding: 0;
            /* 去除项目符号 */
            list-style: none;
            margin-left: 20px;
        }
        
        .nav{
            width: 1205px;
            height: 48px;
            background-color: #E8E7E3;

            margin: 100px auto;
        }

        

        .nav li{
            float: left;
            line-height: 48px;

        }

        .nav a{
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;

            padding: 0 39px;

        }

        .nav a:hover{
            background-color: #3f3f3f;
            color: #e8e7e3;
        }
    </style>
</head>

<body>
    <!-- 创建导航条的结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul>
    
</body>
</html>

总结

下一篇：定位。

MYH永恒
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web前端篇：css浮动
ITmiaomiao666的博客
06-13 709
浮动是网页布局中非常重要的一个属性。那么浮动这个属性一开始设计的初衷是为了网页的文字环绕效果。 文字环绕现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平方向外边距</title> <s...
Web前端学习笔记——浮动
weixin_43121163的博客
02-22 435
块元素在文档流中默认垂直排列，所以div自上向下依次排开，如果希望块元素在页面中水平排列，可以使块元素脱离文档流，使用float来使元素浮动，从而脱离文档流。 浮动可选值： 1、none：默认值，元素默认在文档流中排列。 2、left：元素会立即脱离文档流，向页面的左侧浮动。 3、right：元素会立即脱离文档流，向页面的右侧浮动。 当为一个元素设置浮动以后（float属性是一个非none的值），...
web前端：浮动
H_1998_H的博客
07-11 516
1.浮动的特性 浮动的元素脱离标准文档流 浮动的元素相互贴靠 浮动的元素具有“字围现象” 浮动的元素会对后面的元素造成影响 2.清除浮动影响的方法 给父盒子加上高度（项目中不常用） 因为我们的元素基本上是由内容撑起高。不会给固定的高 给后面的父盒子加上clear：both（浮动清除，但是父盒子的margin失效了：父盒子塌陷了）会引起父盒子的margin失效，也不推荐使用。 外墙法（在浮动的两个父
【web前端】浮动
qq_61768389的博客
07-02 3634
使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录一、浮动1、传统网页布局的三种方式2、标准流（普通流，文档流）3、为什么需要浮动4、什么是浮动5、浮动特性（重难点）（1）设置了浮动（ float )的元素最重要特性（2）如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列（3）浮动元素会具有行内块元素特性6、浮动元素经常和标准流父级搭配使用案例：小米布局案例1​编辑案例：小米布局案例2​编辑案例：小米
web前端-CSS-浮动
jinchenpeng的博客
05-30 285
值得注意的是：
8.2 Web前端-浮动
执笔绘江山的博客
08-02 1357
hello大家晚上好，最近在忙着第二个项目的事情，博客这边已经鸽了几天了，但是我还是会不停更新下去的，我第二个项目做的是小米商城，，后面会给大家详细介绍一下编写过程中的思想和具体步骤，今天先来和大家说一下在我项目设计过程中用到的最多的一个知识，浮动。1.浮动元素会脱离文档流，元素脱离文档流以后，不会再占用文档流的位置，它下边的元素会立即向上移动；...
Web前端基础2-浮动
William_fang的博客
03-28 965
float.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> </head> <body> <link href="float.css" rel="stylesheet" type="text/css"> <!--链接到float.css样式，类型为样式表，
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
web前端学习笔记6
最新发布
hanq2016的博客
05-06 814
web前端学习笔记，持续更新，非常完整，position定位
web前端笔记
07-28
【web前端笔记】是我在参加专业培训机构学习时整理的一系列笔记，主要涵盖了Web前端开发的基础知识、重要概念和技术栈。这些笔记旨在帮助初学者或有经验的开发者更好地理解和掌握前端开发的核心技能，同时也可供自我...
HTML+CSS自适应浮动例子
12-03
兼容IE6,下面的都是废话，是为了达到20个才写的，所以你不要在往下面看下去了，不喜欢写太多说明性文字，直接看代码就是了
CSS实现网页分栏布局的方法：绝对定位和浮动
09-27
网页制作Webjx文章简介：在CSS中，实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的
Web前端学习笔记
weixin_43487110的博客
09-03 2219
Web前端学习笔记 2020-9-3整理 2019-9月-19学完 作者:小宇 HTML 基础知识 互联网中的三大基石 Html (HyperText Markup Language) 超文件标记语言 Http (HyperText Transfer Protocol)超文本传输协议 Url (Uniform Resource Locator) 统一资源定位符 HTML、CSS、JS之间的关系 如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+C
清楚浮动方法总结----web前端
liushaozhuanyong的博客
03-04 543
方法1：给予父盒子足够的高度，即将浮动的元素“关”在父盒子内 方法2：clear:left/right 即清除别人对自己的影响 方法3：“隔墙法”，在两个父盒子中间加一个元素(例如)那么h1就变成一堵“墙” 方法4：“内墙法”。即在两个父盒子其中之一建立一堵“墙”。 方法5：在父盒子内，“修”一堵(没有高的)clear:both的“墙”，那么父盒子就能被浮动的有高度的元素“撑出”高度。
web前端入门——CSS浮动的理解及实际应用
L3gacy
03-21 312
1
Web前端入门学习（6）——浮动例子之鉴赏
weixin_33874713的博客
10-31 128
浮动例子之鉴赏 在浮动原理及清除浮动一文中（http://cherry360.blog.51cto.com/12176744/1864258），简单介绍了浮动的相关基础知识，为了巩固知识点，本篇结合代码展示关于浮动的几个常见例子。 例1：九格子<!DOCTYPEhtml> <htmllang="en"> <head> <m...
web浮动
weixin_62967067的博客
05-18 383
一、浮动 1、定义 元素脱离文档流，按照指定方向发生移动，遇到父级边界换行 2、取值 1、none 不浮动 2、left 左浮动 3、right 右浮动 4、inherit 继承父级 3、作用 解决水平布局问题 4、特性 1、所有标签同排显示 2、行标签支持所有css样式 3、默认内容撑开高度 4、元素脱离文档流 二、清除浮动 1、原因 元素使用浮动后脱离文档流，父级元素检测不到子级的存在，高度无法撑开。 2、解决方案 ①在父级使用height 缺点：拓展性不太好 ②在父级使用overflow：
web---浮动
weixin_57097732的博客
07-19 752
总结： 1、float取值 none——不浮动 left——左浮动 right——右浮动 inherit——继承父级 2、浮动用于解决水平布局 3、两个浮动放在一起会水平摆放 4、可以解决换行被解析的问题 5、特点：所有标签同排显示 行标签支持所有css样式 默认内容撑开宽高 脱离文档流 6、清除浮动 原因：因子级浮动脱离文档流，父级无法撑开高度...
Web实训学习-day04：浮动、元素隐藏
小懒虫的博客
06-23 210
浮动（float） 网页布局的核心——就是用CSS来摆放盒子，CSS提供了3种机制来设置盒子的位置，分别是普通流、浮动和定位。 普通流 块级元素会独占一行，从上到下顺序排列 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行 浮动 浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动 浮动首先创建包含块的概念，浮动的元素总是找离它最近的父级元素对齐，但是不会超出内边距的范围。 浮动的元素排列位置，跟上一个元素有关系，如果上一个元素有浮动，则A元素顶部都会和上一个元素的顶部对齐；如果上一
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MYH永恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值