CSS实现高固定，左右宽固定，中间自适应的三栏布局

最新推荐文章于 2024-01-27 21:11:30 发布
最新推荐文章于 2024-01-27 21:11:30 发布
阅读量388 收藏 1
点赞数
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/105436611
版权

在这里插入图片描述

1. 浮动布局

左右加浮动，中间不动

<section class="layout float">
  <style>
    .layout.float .left {
      float: left;
      width: 300px;
      background: red;
    }
    .layout.float .right {
      float: right;
      width: 300px;
      background: blue;
    }
    .layout.float .center {
      background: yellow;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
      <h2>浮动解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
  </article>
</section>

在这里插入图片描述缺点：
在这里插入图片描述

2. 绝对布局

div 全部浮动，左边距离设为0，中间设 300，最右边那个右边设0

<section class="layout absolute">
  <style>
    .layout.absolute .left-center-right>div {
      position: absolute;
    }
    .layout.absolute .left {
      left: 0;
      width: 300px;
      background: red;
    }
    .layout.absolute .center {
      left: 300px;
      right: 300px;
      background: yellow;
    }
    .layout.absolute .right {
      right: 0;
      width: 300px;
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>绝对定位解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>

在这里插入图片描述缺点：
在这里插入图片描述

3. flexbox布局

父元素设置 flex，左右元素设置宽高，中间设置 flex: 1

<section class="layout flexbox">
  <style>
    .layout.flexbox {
      margin-top: 110px;
    }
    .layout.flexbox .left-center-right {
      display: flex;
    }
    .layout.flexbox .left {
      width: 300px;
      background: red;
    }
    .layout.flexbox .center {
      flex: 1;
      background: yellow;
    }
    .layout.flexbox .right {
      width: 300px;
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>flexbox解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>

在这里插入图片描述

4. 表格布局

父元素设置表格属性，div 设置 table-cell，子元素左右设置宽高即可

<section class="layout table">
  <style>
    .layout.table .left-center-right {
      width: 100%;
      height: 100px;
      display: table;
    }
    .layout.table .left-center-right>div {
      display: table-cell;
    }
    .layout.table .left {
      width: 300px;
      background: red;
    }
    .layout.table .center {
      background: yellow;
    }
    .layout.table .right {
      width: 300px;
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>表格布局解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>

在这里插入图片描述

5. 网格布局

父元素设置 grid

<section class="layout grid">
  <style>
    .layout.grid .left-center-right {
      width: 100%;
      display: grid;
      grid-template-rows: 100px;
      grid-template-columns: 300px auto 300px;
    }
    .layout.grid .left {
      background: red;
    }
    .layout.grid .center {
      background: yellow;
    }
    .layout.grid .right {
      background: blue;
    }
  </style>
  <h1>三栏布局</h1>
  <article class="left-center-right">
    <div class="left"></div>
    <div class="center">
      <h2>网格布局解决方案</h2>
      1.这是三栏布局的浮动解决方案；
      2.这是三栏布局的浮动解决方案；
      3.这是三栏布局的浮动解决方案；
      4.这是三栏布局的浮动解决方案；
      5.这是三栏布局的浮动解决方案；
      6.这是三栏布局的浮动解决方案；
    </div>
    <div class="right"></div>
  </article>
</section>

在这里插入图片描述缺点：
在这里插入图片描述

在这里插入图片描述总结👉👉：当中间的内容，没有超出高的时候，均可以适用。当内容超出中间的高度时
在这里插入图片描述
这个时候就可以发现，flex布局 和 表格布局是可以根据内容的高度变化而变化的。

前端经典的两种布局⛱️⛱️⛱️

圣杯布局和双飞翼布局

通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

在这里插入图片描述

圣杯布局

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

    .header, .footer {
      height: 100px;
      line-height: 100px;
      background-color: aquamarine;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    }

    .footer {
      background-color: blueviolet;
    }

    
    .container {
      /* 
        7. container设置padding: 0, rightWidth, 0, leftWidth
       */
      padding: 0 220px 0 200px;
      /* 
        2. 给container设置上overflow: hidden，可以形成BFC撑开文档
      */
      overflow: hidden;
    }

    .left, .middle, .right {
      /* 
        5. 给left、middle、right设置position: relative，不会遮挡middle的内容
       */
      position: relative;
      /* 
        1. 首先把left、middle、right都放出来，给它们三个设置上float: left, 脱离文档流
        */
      float: left;
      min-height: 130px;
      word-break: break-all;
      /* 
        8. 解决单独部分内容扩充的时候，底部会参差不齐。
       */
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .left {
      margin-left: -100%;
      /* 
        6. left设置 left: -leftWidth
       */
      left: -200px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 200px;
      background-color: cadetblue;
    }

    .right {
      margin-left: -220px;
      /* 
        6. right设置 right: -rightWidth
       */
      right: -220px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 220px;
      background-color: coral;
    }

    .middle {
      /* 
        4. middle设置width: 100%
       */
      width: 100%;
      background-color: darkkhaki;
    }
  </style>
</head>

<body>
  <div class="header">header</div>
  <div class="container">
    <div class="middle">
      <h4>middle</h4>
      <p>
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
        middlemiddlemiddlemiddlemiddle
      </p>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div class="footer">footer</div>
</body>

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

    .header, .footer {
      height: 100px;
      line-height: 100px;
      background-color: aquamarine;
      text-align: center;
      font-size: 30px;
      font-weight: bolder;
    }

    .footer {
      background-color: blueviolet;
    }

    .container {
      /* 
        2. 给container设置上overflow: hidden; 可以形成BFC撑开文档
       */
      overflow: hidden;
    }

    .left, .middle, .right {
      /* 
        1. 首先把left、middle、right都放出来, middle中增加inner，给它们三个设置上float: left, 脱离文档流
       */
      float: left;
      min-height: 130px;
      word-break: break-all;
      /* 
        7. 解决单独部分内容扩充的时候，底部会参差不齐。
       */
      padding-bottom: 9999px;
      margin-bottom: -9999px;
    }

    .left {
      /* 
        5. left设置 margin-left: -100%
       */
      margin-left: -100%;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 200px;
      background-color: cadetblue;
    }

    .right {
      /* 
        6. right设置 right: -rightWidth
       */
      margin-left: -220px;
      /* 
        3. left、right设置上各自的宽度
       */
      width: 220px;
      background-color: crimson;
    }

    .middle {
      /* 
        4. middle设置width: 100%
       */
      width: 100%;
      height: 100%;
      background-color: cornflowerblue;
    }

    .inner {
      margin: 0 220px 0 200px;
      min-height: 130px;
      background-color: darkkhaki;
      word-break: break-all;
    }
  </style>
</head>

<body>
  <div class="header">header</div>
  <div class="container">
    <div class="middle">
      <div class="inner">
        <h4>middle</h4>
        <p>
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddlemiddlemiddlemiddle
          middlemiddlemiddlemiddlemiddle
        </p>
      </div>
    </div>
    <div class="left">
      <h4>left</h4>
      <p>
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
        leftleftleftleftleftleftleftleftleftleftleftleft
      </p>
    </div>
    <div class="right">
      <h4>right</h4>
      <p>
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightrightrightrightright
        rightrightrightrightrightrightright
      </p>
    </div>
  </div>
  <div class="footer">footer</div>
</body>

</html>

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layout</title>
  <style media="screen">
    html * {
      padding: 0;
      margin: 0;
    }

    .layout article div {
      min-height: 100px;
    }
  </style>
</head>
<!-- 每种布局的优缺点，适用的场景 -->

<body>
  <!--浮动布局  -->
  <section class="layout float">
    <style>
      .layout.float .left {
        float: left;
        width: 300px;
        background: red;
      }

      .layout.float .right {
        float: right;
        width: 300px;
        background: blue;
      }

      .layout.float .center {
        background: yellow;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-right-center">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">
        <h2>浮动解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
    </article>
  </section>

  <!-- 绝对布局 -->
  <section class="layout absolute">
    <style>
      .layout.absolute .left-center-right>div {
        position: absolute;
      }

      .layout.absolute .left {
        left: 0;
        width: 300px;
        background: red;
      }

      .layout.absolute .center {
        left: 300px;
        right: 300px;
        background: yellow;
      }

      .layout.absolute .right {
        right: 0;
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>绝对定位解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>


  <!-- flexbox布局 -->
  <section class="layout flexbox">
    <style>
      .layout.flexbox {
        margin-top: 110px;
      }

      .layout.flexbox .left-center-right {
        display: flex;
      }

      .layout.flexbox .left {
        width: 300px;
        background: red;
      }

      .layout.flexbox .center {
        flex: 1;
        background: yellow;
      }

      .layout.flexbox .right {
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>flexbox解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>


  <!-- 表格布局 -->
  <!-- 兼容性好 -->
  <section class="layout table">
    <style>
      .layout.table .left-center-right {
        width: 100%;
        height: 100px;
        display: table;
      }

      .layout.table .left-center-right>div {
        display: table-cell;
      }

      .layout.table .left {
        width: 300px;
        background: red;
      }

      .layout.table .center {
        background: yellow;
      }

      .layout.table .right {
        width: 300px;
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>表格布局解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>

  <!-- 网格布局 -->
  <section class="layout grid">
    <style>
      .layout.grid .left-center-right {
        width: 100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;
      }

      .layout.grid .left {
        background: red;
      }

      .layout.grid .center {
        background: yellow;
      }

      .layout.grid .right {
        background: blue;
      }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
      <div class="left"></div>
      <div class="center">
        <h2>网格布局解决方案</h2>
        1.这是三栏布局的浮动解决方案；
        2.这是三栏布局的浮动解决方案；
        3.这是三栏布局的浮动解决方案；
        4.这是三栏布局的浮动解决方案；
        5.这是三栏布局的浮动解决方案；
        6.这是三栏布局的浮动解决方案；
      </div>
      <div class="right"></div>
    </article>
  </section>
</body>

</html>
淘淘是只狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现中间定宽，左右自适应的三列布局
OrangeJ
07-03 562
要实现中间定宽，左右自适应的三列布局，个人想到的一种方式是：首先在父容器内设置两个子容器，宽度各占50%并分别向左向右浮动；在每个子容器中放置一个显示区，左容器的显示区设置margin-right，右容器的显示区设置margin-left，这样便留出了中间的空间。最后再使用一个定宽的绝对定位容器水平居中显示，即可完成中间定宽，左右自适应的三列布局。示例代码如下：&lt;!DOCTYPE html&...
用css实现三栏布局，要求左右定宽，中间自适应
weixin_39963132的博客
12-30 2099
面试的时候经常会被问到这个题目，以及我们在平常做界面的时候也会遇到这种三栏布局的要求，那么如何实现呢？其实网上有很多方法，但还是跟着我的例子敲一遍代码吧，这样自己才能知道原理是什么，也有助于理解。 一、圣杯布局（让left和right占据container的padding） html界面：分别是左中右的三个div &lt;div class="container"&gt; &...
用css实现一个左右布局，右边固定300px宽，高度顶满，左边撑开顶满剩余位置
qq_63525451的博客
04-08 356
实现左右布局，右边固定，左边拉满
使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法
Lee_taotao的博客
06-03 1752
1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后) 如果窗口太小，右边元素会被挤到下一行 <head> <style> .box{ height: 200px; padding: 0 200px 0 100px; } .l...
css设置某个div或table(固定表头不动)为固定大小滑动框
最新发布
weixin_64881847的博客
01-27 550
css设置某个div或table(固定表头不动)为固定大小滑动框
为所有CSS网格行设置固定高度
全栈空间
01-20 144
当我构建100Ideas时，有一个小要求，当元素动态增加时，它不应该影响网格的布局，网格元素的行和列的高度应该是固定的。之前：优化后：代码超文本标记语言 <div className='container'> <div className='content'> <div className='item'/> &...
常用CSS布局（1.左右高度固定，中间自适应 2.上下高度固定，中间自适应）
dbagugumf018717008的博客
02-27 623
1.左右高度固定，中间自适应 一般有五种方法： 第一种利用浮动： 分为两种情况： 文本高度未超过自适应div最小高度： <section class="layout float"> <style> .layout.float .left{ float...
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
总的来说，实现“中间固定宽度两边自适应宽度”的三栏布局有多种方法，包括传统的浮动、绝对定位，以及现代的Flexbox和Grid布局。每种方法都有其优缺点，开发者应根据项目需求和目标浏览器的兼容性来选择合适的技术...
使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)
11-20
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。 1...
css实现两栏固定中间自适应的方法
12-13
圣杯布局是一种经典的三栏布局解决方案，它确保了中间栏始终充满可用宽度。中间栏被放在最前面，外部有一个包裹容器。CSS代码如下： ```css #container { position: relative; } .center_wrap, .left, .right ...
CSS三列布局两端固定宽度中间自适应
09-25
"CSS三列布局两端固定宽度中间自适应"是一种常见的网页布局模式，它允许页面的两侧栏宽度固定，而中间主要内容区域则根据浏览器窗口大小自适应调整。这种布局方式能够很好地平衡内容展示和用户体验，尤其适用于内容...
最强大的 CSS 布局 —— Grid 布局
u014645827的博客
07-19 2408
Grid布局相关的属性以及值众多，需要记忆的不少，建议可以跟demo一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小demo演示，建议大家可以自己修改看看效果加深记...
android 图片宽度自适应屏幕,Android ImageView 高度固定，宽度自适应
weixin_30369779的博客
05-25 2554
为避免歧义，我们首先来明确下文章标题的具体含义。对于一个 ImageView，所谓“高度固定，宽度自适应”在这里是指这个 ImageView 的高度取我们预设好的一个固定值，待展示图像要铺满 ImageView 的高度(这点很重要！也是最不容易满足的一点需求！)，ImageView 的宽度随图像比例自适应，即在不超出屏幕物理显示范围的前提下根据待展示图像的长宽比和自身高度来确定自身宽度。大家在实际...
css grid 自动高度_用最简洁的 CSS 实现 10 种现代布局
weixin_39946996的博客
12-10 1258
Mom, I Can't Learn Anymore(《妈妈，我学不动了！》) 是一系列关于计算机领域程序最新时事的文章(偏向于前端领域)，在该系列会从不同的角度讨论领域内的实践和进展。前言 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets(chrome team 成员)。虽然我已经好几个月没有深...
css grid 自动高度_10分钟理解CSS3 Grid布局
weixin_35894622的博客
01-17 3453
基本介绍上一篇文章我们介绍了css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout(删格布局)，以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：html不够简洁；需...
两边宽度固定、中间自适应布局的解决方案
Silence-Lee的博客
07-14 903
趁有时间，整理一下，做个笔记！ 1 浮动 css代码 .parent{width: 100%;height: 200px;text-align: center;} .left {float: left;width: 300px;height: inherit;background: yellow;} .right{float: right;width: 300px;height: inher...
jqGrid 设置两种宽高（固定宽高，自适应宽高）
旭东怪的博客
11-25 4282
1 HTML 代码 <table id='datagrid'></table> 2 固定宽高 2.1初始化设置固定宽高 //jqGrid初始化 jQuery("#datagrid").jqGrid({ datatype: "local", height: $(window).height() - 115,//设置高度 width: $(window).width() - 7,//设置宽度 rownumbers: true, //行号 .
CSS实现背景图片固定宽高比自适应调整
热门推荐
feiyu_may的博客
08-20 8万+
    &lt;img&gt;标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是&lt; img&gt;标签一样通过src引入，而是通过css的background-image: url('路径')实现。     实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现，padding-top取...
用html和css写一个三栏布局，要求左右宽度固定中间自适应。
08-10
要实现一个左右宽度固定中间自适应的三栏布局，可以使用HTML和CSS进行编写。 首先，在HTML中，我们可以使用```<div>```标签来创建三个元素，分别代表左栏、中栏和右栏。例如： ``` 左栏内容 中栏内容 右栏内容 ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值