CSS学习笔记

最新推荐文章于 2024-10-02 15:35:50 发布
最新推荐文章于 2024-10-02 15:35:50 发布
阅读量56 收藏
点赞数
文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wakeup_high/article/details/131407704
版权

  1. 什么是CSS
    CSS是级联样式表的缩写，HTML用于撰写页面内容，CSS则用于呈现内容，涉及到页面布局，元素位置、距离、颜色、大小、是否显示、是否浮动、透明度等。

  2. CSS语法
    一条CSS样式规则由两个主要部分构成：

    • 选择器：需要改变样式的HTML元素，分为类选择器，id选择器，元素选择器
    • 声明：样式属性+值

    id选择器 :前面加上#号

    /*css中*/
    #sky{
        color: blue;
    }
/*html*/
    <p id="sky">蓝色的天空</p>

    则由id为sky的会呈现蓝色，并且这个id是唯一的。

    class选择器:前面加上.号

    /*css文件*/ 
    .center{
    text-align: center;
    }
    .large{
    font-size: 30px;
    }
    .red{
    color: red;
    }
/*html文件 */
    <p class="center">我会居中显示的</p>
    <p class="red">我是红色的</p>
    <p class="center large red">我又红又大还居中</p>
    <p class="red">我也可以是红的</p>

    则对应class名称就会发生相应变化。可见，class的值可以是多个。

    元素选择器

    /* css */
    p{
        color:red;
        text-align:center;
    }
/* html*/
    <p>红色居中</p>
    <p>红色居中</p>
    <p>红色居中</p>

    css中定义了p标签，则HTML中所有p标签都会变成红色居中。

  3. CSS生效办法

    • 外部样式表
      CSS有一个单独的以.css结尾的文件，在其中进行样式的设置。要使其生效，需要在html文件的头部加上<link>，如下所示：
        <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <title>页面标题</title>
    </head>
    <body>
    <h1>我是有样式的</h1>
    <hr>
    <p class="haha">还是有点丑：)</p>
    </body>
    </html>

    同一目录创建mycss.css文件，如下：

        body {
    background-color: linen;
    text-align: center;
    }
    h1 {
    color: red;
    }
    .haha {
    margin-top: 100px;
    color: chocolate;
    font-size: 50px;
    }
    • 内部样式表
      样式也可以直接放在HTML文件中，使用<style>元素包围。例如:
        <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <title>页面标题</title>
    <style>
        body {
        background-color: linen;
        text-align: center;
        }
        h1 {
        color: red;
        }
        .haha {
        margin-top: 100px;
        color: chocolate;
        font-size: 50px;
        }
    </style>
    </head>
    <body>
    <h1>我是有样式的</h1>
    <hr>
    <p class="haha">还是有点丑：)</p>
    </body>
    </html>
    • 内联样式
      直接将样式写到要应用的元素中。例如：
        <h3 style="color:green;">I am a heading</h3>

    级联的优先级：
    内联 > 内部样式表或外部样式表 > 浏览器缺省样式
    多重样式：

  4. 盒子模型
    一个HTML元素可以看作一个盒子。从内到外，内容（content），内边距（padding），边框（border），外边距（margin）构成

    • Content：盒子的内容，如文本、图片等
    • Padding：填充，也叫内边距，内容和边框之间的区域
    • Border：边框，默认不显示
    • Margin：外边距，边框以外与其他元素的区域
      例如：
      html文件：
        <html>
    <head>
        <link rel="stylesheet" href="./mycss.css">
    </head>
    <body>
        <div class="box1">我是内容一，外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
        <div class="box2">我是内容二，外面蓝色的是我的边框。注意与上面元素的外边距，发生了叠加，不是50px而是25px。</div>
    </body>
    </html>

    css文件：

        .box1 {
    height: 200px;
    width: 200px;
    background-color:#615200;
    color: aliceblue;
    border: 10px solid red;
    padding: 25px;
    margin: 25px;
    }
    .box2 {
    height: 300px;
    width: 300px;
    background-color:#004d61;
    color: aliceblue;
    border: 10px solid blue;
    padding: 25px;
    margin: 25px;
    }

    在浏览器中右键，选择检查，样式即可查看该网页的margin,padding等宽度。也可简写，例如
    padding: 25px 50px 75px 100px;
    顺序为上，右，下，左顺时针方向。
    浏览器包含有默认样式，如果不取消，则margin的值是不为0的。使用如下语句消除默认样式：

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    其中的box-sizing用于定义如何计算一个元素的总宽度和总高度：

    • content-box是默认值。如果设置一个元素的宽为100px,那么这个元素的内容区会有100px宽，并且任何边框和内边距的狂赌都会被增加到最后绘制出来的元素宽度中。
    • border-box告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。

  5. 定位
    position：用于对元素进行定位，包括有：

    • static 静态：默认值，无论设置与否，都按正常的页面布局进行。即元素在HTML出现的先后顺序从上到下，从左到右。
    • relative 相对定位，将元素相对于静态位置进行偏移，比如：
      html
    <div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>

    css:

    .example-relative {
    position: relative;
    left: 60px;
    top: 40px;
    background-color: rgb(173, 241, 241);
}
    • fixed 固定：元素相对视口（viewport，浏览器的屏幕可见区域）固定不动，由top, bottom, left, right属性确定。比如浏览器右下角固定放置一个按钮元素：
      html:
        <div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
    <div class="example-fixed">这个按钮是固定的</div>

    css:

    .example-fixed {
    position: fixed;
    bottom: 40px;
    right: 10px;
    padding: 6px 24px;
    border-radius: 4px;
    color: #fff;
    background-color: #9d0f0f;
    cursor: pointer;
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
    height: 5000px;
    width: 5000px;
    padding: 20px;
    background-color: darkkhaki;
}
    • absolute 绝对：相对于最近设置了定位属性（非static）的父元素进行偏移。如果都没有，则相对于<body>，例如
      html:
    <div class="example-relative">这是父元素，有 relative 定位属性
    <div class="example-absolute">
    这是子元素，有 absolute 定位属性
    </div>
</div>

    css:

    .example-relative {
    position: relative;  
    width: 400px;
    height: 200px;
    border: 3px solid rgb(87, 33, 173);
}
.example-absolute {
    position: absolute;
    top: 80px;
    right: 5px;
    width: 200px;
    height: 100px;
    border: 3px solid rgb(218, 73, 16);
}

    设置了元素的position属性后，才能使用top, bottom, left, right属性，否则定位无效。

  6. 溢出
    当元素内容超过指定区域是，可通过overflow属性处理溢出部分：

    • visible 默认值：溢出部分不被裁剪，在区域外面显示
    • hidden 裁剪溢出部分且不可见
    • scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
    • auto 裁剪溢出部分，视情况提供滚动条

  7. 浮动
    设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局

    <html>
<head>
    <style>
        .example-float-right {
        float: right;
        }
    </style>
</head>
<body>
    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem, architecto officiis, repellendus
    corporis obcaecati, et commodi quam vitae vel laudantium omnis incidunt repellat qui eveniet fugiat totam
    modi nam vero!</p>
</body>
</html>

    一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

  8. 不透明度
    opacity对任何元素设置不透明度。只在0.0~1.0之间，值越低，透明度越高

  9. 组合选择器
    CSS有三种选择器：元素、id 和 class 。但我们也可以进行组合，以得到简洁精确的选择。
    后代选择器
    以空格作为分隔，如：.haha p代表在.haha这个div中，所有为<p>的元素。例如：

    <html>
<head>
    <style>
        .haha p {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="haha">
        <p>Paragraph 1 in the div .haha.</p>
        <p>Paragraph 2 in the div .haha>.</p>
        <span>
            <p>Paragraph 3 in the div .haha.</p>
        </span>
    </div>
    <p>Paragraph 4. Not in a div .haha.</p>
    <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

    子选择器
    也称为直接后代选择器，以>作为分隔，如：.haha > p代表在有.haha类的元素内的直接<p>元素。

  10. 伪类和伪元素
    伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。比如我们可能有这样的需求：

    • 鼠标移到某元素上变换背景颜色
    • 超链接访问前后样式不同
    • 离开必须填写的输入框时出现红色的外框进行警示
    • 保证段落的第一行加粗，其它正常
    • …
      使用伪类/伪元素语法如下：
    /* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
   selector:pseudo-class/pseudo-element {
       property:value;
   }

    以下是常用的伪类/伪元素的简单使用：

      a:link {color:#FF0000;}     /* 未访问的链接 */
  a:visited {color:#00FF00;}  /*已访问的链接*/
  a:hover {color:#FF00FF;}    /*鼠标划过链接*/
  /*鼠标移到段落则改变背景颜色*/
  p:hover {background-color: rgb(226, 43, 144);}
  p:first-line{color:blue;}   /*段落的第一行显示蓝色*/
  p:first-letter{font-size: xx-large;}   /*段落的第一个字超大*/

  h1:before { content:url(smiley.gif); } /*在每个一级标题前插入该图片*/
  h1:after { content:url(smiley.gif); } /*在每个一级标题后插入该图片*/

  11. CSS Flex
    弹性盒子能够帮助我们在某个方向上排列元素，还能控制他们的尺寸，对齐方式，外观顺序等。需要至少两个元素，一个父元素(flex container)，以及至少一个子元素(flex item)。在父元素中使用display: flex，会使父变成弹性容器，只有其直接子元素才能成为弹性项，弹性项目的子项不受影响。

    • justify-content
      HTML:

          <div class="wrapper">
        <div class="menu">
            <a class="active" href="#">Profile</a>
            <a href="#">Notifications</a>
            <a href="#">Payments</a>
            <a href="#">Settings</a>
        </div>
    </div>

          .menu {
        display: flex;
        justify-content: space-between;
    }

      上述例子，将父元素menu定义为弹性容器，并使用justify-content: space-between;控制弹性项目的间隔；
      justify-content的属性值有：

      • flex-start
        弹性项目会从容器的起始端开始分布，没有间距
      • flex-end
        弹性项目会从容器的终端开始分布，没有间距
      • center
        弹性项目会居中分布，没有间距
      • space-between
        所有项目都尽可能地隔开，第一个项目在开头，最后一个项目在结尾
      • space-around
        弹性项目之前和之后的空间是项目之间空间的一半
      • space-evenly
        项目前后和项目之间的间距相同

    • Flex-Wrap
      用于在空间不足时，进行换行，默认值为nowrap，将值设置为wrap时，可以换行，例如：
      HTML

      <div class="logos">
    <img ...>
    <img ...>
    <img ...>
    <img ...>
</div>

      css

      .logos {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

    • Align Items
      可以使得图片和文字居中对齐，例如：
      HTML

      <div class = "icon-wrap">
    <span class = "icon material-icons">videocam</span>
    <span class = "icon-text">Video Conference</span>
</div> 

      .icon-wrap {
    display: flex;
    align-items: center;
}

      align-items其属性值有：

      值描述
      stretch默认。项目拉伸充满容器
      center容器中央
      flex-start容器开头
      flex-end容器末端
      baseline定位到容器的基线
      initial将此属性设置为其默认值
      inherit从其父元素继承此属性

    • Flex Direction
      改变主轴的方向。其属性值包括：row,column,row-reverse,column-reverse。加了reverse的会使flex-start的起点也转换。

    • Flex Grow
      规定在相同的容器中，项目相对于其它弹性项目的增长量。

    • Flex Shrink
      在相同的容器中，项目相对于其它弹性项目的收缩量

    • Flex Basis
      规定弹性项目的初始长度。如下的例子在大屏上横向分割，在小屏上垂直分割：

      <div class="container">
    <div class="split"></div>
    <div class="split"></div>
</div>

      .split {
    width: 50%;
}
@media screen and (max-width: 767px){
    .split{
        width: 100%;
        height: 50%;
    }
}

      可以将其中的width:50%换成flex-basis: 50%。flex-basis可以根据宽度自我调整。
      不随个数改变，自动均分的css:

      .container {
    display: flex;
}
.plan {
    flex-basis: 0%;
    flex-grow: 1;
    flex-shrink: 1;
}

    • Flex
      可以使用flex代替flex-grow,flex-shrink,flex-basis。
      flex: 1 1 0%;

    • Auto Margins
      margin属性可以在弹性子项中用来扩大外边距以占据额外的空间。例如：

      <footer>
    <div class="footer-col">...</div>
    <div class="footer-col">...</div>
    <div class="footer-col">...</div>
    <div class="footer-col">...</div>
</footer>

      .footer-col:nth-child(2){
    margin-left:auto;
}

    • Order
      例子：小屏时，将导航栏上的链接放在第二排

      <header>
    <a class="logo-wrap">...</a>
    <ul>...</ul>
    <span class="btn-wrap">...</span>
</header>

      @media screen and (max-width:767px){
    header {
        flex-wrap: wrap;
    }
    ul {
        order: 3;
        flex: 100%;
    }
}

      其中order属性为3，也就是将ul放置在最后。

    • Align Self
      属性指定弹性容器内所选项目的对齐方式。将覆盖弹性容器的align-items 属性。

    • Flex Flow
      结合了flex-direction和flex-wrap。flex-flow: row wrap;

    • Align Content
      align-content用于flex容器中的多行flex子项，同理还有justify-content

    • Inline Flex
      将对象作为内联弹性伸缩盒显示

  12. Grid

    • Display Grid&Grid Template Columns
      felxbox帮助我们安排一维的元素，grid帮助我们安排二维的元素。需要至少两个元素，一个父元素作为grid container，至少一个子元素为grid item。grid-template-columns声明了分成多少列，以及每个的宽度。
      grid-template-columns: 1fr 1fr 1fr;和grid-template-columns: repeat(3,1fr)

    • Grid Template Rows
      grid-template-rows声明分成了多少行，以及每行的高度。

    • Gap

      • column-gap
        设置两列之间的间距。

      • row-gap
        设置两行之间的间距。

        .container {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    <!-- 以上两条可替换成 gap:2rem; -->
}

@media screen and (min-width: 540px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 767px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

    • Justify Content,Align Content
      对于flex存在main axis和cross axis；对于grid存在inline axis和block axis。inline是横向，block为纵向。属性用于在容器内对齐整个网格。

    • Place Content
      place-content 属性是align-content 和 justify-content的简写。使用这两个属性的值可以用于任何的布局情况。

    • Justify Items
      justify-items 属性在网格容器上进行设置，使子元素（网格项）在行内方向对齐。对于英文页面，行内方向是从左到右，块方向是向下。如需使此属性具有任何对齐效果，网格项需要在行内方向上在自身周围留出可用空间。提示：如需在块方向而不是行内方向对齐网格项目，请使用 align-items 属性。

    • Align Items
      在水平轴上的对齐方式。

    • Grid Column & Grid Row
      grid-column-start :n声明从哪一条线开始。grid-column-end :n声明到哪一条线结束。还可以使用两条语句，表达其跨越了2列:grid-column-start: 1;grid-column-end: span 2;
      或者grid-column-start: span 2;
      grid-column-end: 3

  13. 单位

    • fr
      fr是fraction的简称，代表剩余空间的一部分。在flexbox中，我们可以将项目的flex-grow设置为大于0的值，使这些元素占据父容器中剩余空间的几分之一。fr的单位与此很相似。在我们上面的例子中，只有一列有fr单元，所以这一列占据了100%的剩余空间。我们很快就会看到大部分涉及fr单元的例子。
Qf要变强！!O_o
关注
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS 学习笔记
01-19
id的优点（class的缺点）：id写在css用#选择器，class写在css中用.选择器。#选择器的优先级高于.选择器大约10倍，所以当你需要提升优先级的时候，id标签，或者id容器内的标签将是很容易和有效的。而class标签，或者...
css学习笔记1
qq_42236791的博客
12-12 981
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2428
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记目录
wz_1992的博客
05-30 499
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
CSS学习笔记（详细）
jojo_oulaoula的博客
05-13 746
Cascading Style Sheet 级联样式表表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定若将HTML比做人的骨架，那么CSS就是皮肤，在骨架的架构上进行修饰美化。CSS文件后缀名就是.css。
css学习笔记
weixin_45085122的博客
11-13 1402
css
HTML/CSS学习笔记
weixin_54687499的博客
06-10 2391
HTML/CSS 自学笔记 学习使用视频：B站黑马程序员前端课程（如侵权，立即删，请私信）
前端css基础学习笔记
a_big_panda的博客
01-22 1003
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
【CSS学习笔记】
weixin_45037690的博客
08-12 846
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
CSS画出三角形的做法
mingangel的博客
10-01 253
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 300
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
m0_74012211的博客
10-02 275
CSS 盒子属性
【CSS】position
最新发布
小秀的博客
10-02 174
特点：粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。特点：不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移。特点：元素脱离文档流 ，块级元素由内容撑开宽高，清除子集浮动。参考物：距离最近的使用了定位的父级，没有时找body。position: static 静态定位（默认）参考物：根据用户的滚动位置进行定位。参考物：元素的初始位置。
CSS 中的@media print 是干什么用的？
读心悦
09-29 173
在这个查询块内，你可以设置各种样式，以确保打印输出的内容看起来整洁、专业，并且只包含必要的信息。例如，你可能还想隐藏某些不重要的元素，如广告、侧边栏或仅用于装饰的图片，同时增加标题和段落的字体大小，以及为页面添加页眉和页脚（但这次是在打印样式中自定义的，与网页上的不同）。这种做法通常很有用，因为网页的页眉和页脚可能包含导航链接、社交媒体图标、版权声明等对于在线浏览很有用的信息，但在打印版本中，这些信息可能并不必要，甚至可能占用宝贵的页面空间。元素都将被隐藏（即不显示在打印的页面上）。这是通过将这些元素的。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值