CSS3 基础（010_多列布局）

最新推荐文章于 2024-07-14 13:35:37 发布
最新推荐文章于 2024-07-14 13:35:37 发布
阅读量1k 收藏
点赞数
分类专栏： CSS 文章标签： css3

原始网址：http://www.w3schools.com/css/css3_multiple_columns.asp

翻译：

CSS3 多列（CSS3 Multiple Columns）

CSS3 多列布局（CSS3 Multi-column Layout）

CSS3 多列布局对文本的多列定义来说是很容易的，它的效果如同报纸：
CSS3 多列布局

<!DOCTYPE html>
<html>
<head>
<style>
.w3-light-grey {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

.w3-padding-jumbo {
    padding: 32px 64px !important;
}

.w3-center {
    text-align: center !important;
}

.newspaper {
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-rule: 1px solid lightgrey;
    column-count: 3;
    column-gap: 40px;
    column-rule: 1px solid lightgrey;
    padding: 15px;
}

.w3-large {
    font-size: 18px !important;
}

body {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}
</style>
</head>
<body>
    <div style="border: 1px solid #ddd">
        <div class="w3-light-grey w3-padding-jumbo w3-center">
            <h3>Daily Ping</h3>
        </div>
        <p class="newspaper">
            <span class="w3-large">Lorem ipsum</span><br> dolor sit amet,
            consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
            ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
            veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
            ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
            in hendrerit in vulputate velit esse molestie consequat, vel illum
            dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto
            odio dignissim qui blandit praesent luptatum zzril delenit augue duis
            dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
            eleifend option congue nihil imperdiet doming id quod mazim placerat
            facer possim assum.
        </p>
    </div>
</body>
</html>

Browser Support

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。
数字之后跟从 -webkit- 或 -moz- 指定带前缀工作的第一个版本号。

属性（Property）chromeIEfirefoxsafariopera
column-count50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-gap50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-rule50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-rule-color50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-rule-style50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-rule-width50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-span50.0
4.0 -webkit-		10.0Not supported9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1
column-width50.0
4.0 -webkit-		10.02.0 -moz-9.0
3.1 -webkit-		37.0
15.0 -webkit-
11.1

CSS3 多列属性（CSS3 Multi-column Properties）

本章，你将学习到以下多列属性：

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 创建多列（CSS3 Create Multiple Columns）

column-count 属性指定元素应该被分割的列数。
下列示例将 <div> 元素内的文本分割为 3 列：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-count property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>

</body>
</html>

CSS3 指定列间距（CSS3 Specify the Gap Between Columns）

column-gap 属性指定列间距。
下列示例指定列间距为 40 像素：

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-gap property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>

CSS3 列规则（CSS3 Column Rules）

column-rule-style 属性指定列之间的样式规则：

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-style property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>

column-rule-width 属性指定列之间的宽度规则：

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-width property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>

column-rule-color 属性指定列之间的颜色规则：

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-rule-color property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>

column-rule 属性是以上所有 column-rule-* 属性的简写属性。
下列示例设置列之间的宽度、式样、颜色规则：

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-rule property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>

指定元素具备内边距的列数（Specify How Many Columns an Element Should Span）

column-span 属性指定元素具备内边距的列数。
下列示例指定 <h2> 元素的所有列均具备内边距：

/* 注意：Firefox 不支持该属性 */
h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all; /* 语法：column-span: 1|all|initial|inherit; */
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Firefox and Internet Explorer 9 (and earlier versions) do
        not support the column-span property.
    </p>
    <div class="newspaper">
        <h2>Lorem Ipsum Dolor Sit Amet</h2>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
        volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
        ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
        molestie consequat, vel illum dolore eu feugiat nulla facilisis at
        vero eros et accumsan et iusto odio dignissim qui blandit praesent
        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        Nam liber tempor cum soluta nobis eleifend option congue nihil
        imperdiet doming id quod mazim placerat facer possim assum.
    </div>
</body>
</html>

指定列宽（Specify The Column Width）

column-width 属性对列指定建议性的、可选的宽度。
下列示例对列指定建议性的、可选的宽度为 100px：

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<style>
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    -moz-column-width: 100px; /* Firefox */
    column-width: 100px;
}
</style>
</head>
<body>
    <p>
        <b>Note:</b> Internet Explorer 9, and earlier versions, does not
        support the column-width property.
    </p>
    <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer
        adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
        dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
        vulputate velit esse molestie consequat, vel illum dolore eu feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
        blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
        congue nihil imperdiet doming id quod mazim placerat facer possim
        assum.</div>
</body>
</html>
柯南道尔2606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3基础（一）
chihuomiao的博客
04-02 405
border-radius：按左上右上右下左下的顺序设置四个边框的角的半径 当元素的高度和宽度相同，圆角的半径为宽度的一半或直接设50%可以画个圆 设置一个值1就是所有的角都按值1变化 设置值1 值2 是设置了左上角和右下角的值1 右上角和左下角的值2 三个值呢？第一个值表示左上的弯曲程度第二个表示右上角和左下角的圆润程度 第三个值表示右下角的圆角大小 你要设置边框圆角首先你得有边框吧？可不要忘了哦 box-shadow：（inset）x-offse空格y-offset空格blur-radiu...
CSS3多列布局
chen'blog
07-26 223
CSS3多列布局（浏览器兼容） columns属性 简写属性 column-count属性：定义列的数量 column-width属性：定义列的宽度 column-count属性（列的数量） 用于设置列的数量或者允许的最大列数 auto：默认值，用于表示列的数量由其他CSS属性决定 number：必须是正整数，用于表示定义列的数量 column-width属性（列的宽度） 用于设置列的宽度或者列的最小宽度 auto：默认值，用于表示列的宽度由其他CSS属性决定 length：必须是正
css colum 列设置
jasonjkj的博客
09-18 675
head> meta charset="UTF-8"> title>Titletitle> style> /* 1.column-count:整数; 列数 -webkit-column-count:3; -moz-column-count:3; 2.column-gap:
CSS3中多列布局详解
AIMing_byte的博客
01-14 2054
在CSS3之前，想要设计类似报纸那样的多列布局，有两种方式可以实现：一种是"浮动布局"，另一种是“定位布局”。为了解决这多列布局的难题，CSS3新增了一种布局方式-多列布局。多列布局提供了一种多列组织内容的方式，可以简单的实现类似报纸格式的布局。
Div_CSS.rar_DIV css布局_css大全_css布局
09-23
- 浮动布局（Float Layout）：通过`float`属性让元素在容器内浮动，常用于创建多列布局。 - 定位布局（Positioning）：通过`position`属性（如`static`、`relative`、`absolute`、`fixed`）来精确控制元素的位置。...
CSS 多列布局问题简单解决方案
09-25
纯 CSS 打造多列等高并不像想象中那么...本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。
css设置多列等高布局的方法示例
09-22
Flexbox是CSS3引入的一种布局模式，特别适合处理多列等高布局。通过设置`display: flex`，我们可以将容器转换为弹性盒子容器，其子元素成为flex项。`flex-direction`属性用于定义主轴的方向，默认为`row`，即水平...
使用CSS3实现多列布局与多背景的技巧
12-13
多列布局CSS多列布局继承自块级布局模式，允许简单地定义多列文本。 一行太长的文字读起来很麻烦；当人眼从一行过长的文字末端移动到下一行开始处，就容易弄错到底该读哪一行。因此，为了最优化使用大的显示屏幕，...
使用CSS3多列布局属性.ppt
07-02
使用CSS3多列布局属性.ppt
使用css3实现【水波纹扩散效果】
xixixixixixixi21的博客
07-14 477
在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。.wave-effect容器设置了绝对定位，并给它的背景设置了一个线性渐变，同时应用了一个名为wave的动画，模拟了水波向右平移然后回溯的效果。
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
torchaudio-0.12.1+cpu-cp37-cp37m-win_amd64.whl
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
中南大学机械设计课程设计说明书.doc
07-17
说明书
仓库进销出入库存管理系统（带库存预警）-Excel模版
07-17
【作品名称】：仓库进销出入库存管理系统（带库存预警）-Excel模版 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
集成产品开发(IPD)高层培训.docx
07-17
集成产品开发(IPD)高层培训.docx
出入库存管理（进销存）-Excel模板
07-17
【作品名称】：出入库存管理（进销存）-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
CSS3多列布局：column-count与column-gap详解
本章节主要讲解的是CSS3中的高级布局技术，特别是针对多列布局（Multi-column Layout），这是在网页设计中实现内容优化和阅读体验的重要工具。CSS3的多列布局模块引入了一套用于创建多列文本容器的属性，使得设计师...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值