CSS 基础（025_表单）

最新推荐文章于 2024-10-20 16:51:54 发布
最新推荐文章于 2024-10-20 16:51:54 发布
阅读量392 收藏 1
点赞数
分类专栏： CSS 文章标签： css

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

翻译：

CSS 表单

使用 CSS 能够对 HTML 表单的外观进行极大地改善：
CSS 表单

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Forms</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
    font-family: Verdana, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit
}

@media only screen and (min-width:601px) {
    .w3-col.m1{width:8.33333%}
    .w3-col.m2{width:16.66666%}
    .w3-col.m3,.w3-quarter{width:24.99999%}
    .w3-col.m4,.w3-third{width:33.33333%}
    .w3-col.m5{width:41.66666%}
    .w3-col.m6,.w3-half{width:49.99999%}
    .w3-col.m7{width:58.33333%}
    .w3-col.m8,.w3-twothird{width:66.66666%}
    .w3-col.m9,.w3-threequarter{width:74.99999%}
    .w3-col.m10{width:83.33333%}
    .w3-col.m11{width:91.66666%}
    .w3-col.m12{width:99.99999%}
}

@media only screen and (min-width:993px) {
    .w3-col.l1{width:8.33333%}
    .w3-col.l2{width:16.66666%}
    .w3-col.l3,.w3-quarter{width:24.99999%}
    .w3-col.l4,.w3-third{width:33.33333%}
    .w3-col.l5{width:41.66666%}
    .w3-col.l6,.w3-half{width:49.99999%}
    .w3-col.l7{width:58.33333%}
    .w3-col.l8,.w3-twothird{width:66.66666%}
    .w3-col.l9,.w3-threequarter{width:74.99999%}
    .w3-col.l10{width:83.33333%}
    .w3-col.l11{width:91.66666%}
    .w3-col.l12{width:99.99999%}
}

@media screen and (max-width:992px){.w3-main{margin-left:0!important;margin-right:0!important}}
</style>
<style>
.test input[type=text], .test select {
    width: 100%;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 3px #ddd;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.test input[type=button], .test .button {
    width: 100%;
    text-align: center;
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    margin: 14px 0 8px 0;
    display: inline-block;
    border: none;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px #ddd;
}

.test input[type=button]:hover, .test .button:hover {
    background-color: #45a049;
}

.test input[type=text]:focus, .test select:focus {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
        rgba(102, 175, 233, .6);
}

.label {
    color: green;
    display: inline-block;
    width: 130px;
    text-align: right;
    padding-right: 15px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-decoration: none;
    margin: 4px 2px;
}
</style>
</head>
<body>
    <div class="w3-main w3-light-grey" style="margin-left: 220px; padding-top: 0px;">
        <div class="w3-row w3-white">
            <div class="w3-col l10 m12" style="padding: 16px;">
                <div style="border-radius: 5px; background-color: #f2f2f2; padding: 40px;">
                    <form action="http://www.w3schools.com/css/action_page.php" class="test">
                        <label for="fname">First Name</label>
                        <input type="text" id="fname" name="firstname">

                        <label for="lname">Last Name</label>
                        <input type="text" id="lname" name="lastname">

                        <label for="country">State</label> 
                        <select id="country" name="country">
                            <option value="usa">Australia</option>
                            <option value="usa">Canada</option>
                            <option value="usa">USA</option>
                        </select>

                        <a target="_blank" href="http://www.w3schools.com/css/tryit.asp?filename=trycss_forms" class="button">Try it Yourself »</a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

样式化输入栏（Styling Input Fields）

使用 width 属性确定输入栏的宽度：

input {
    width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<style>
input {
    width: 100%;
}
</style>
</head>
<body>
    <p>A full-width input field:</p>
    <form>
        <label for="fname">First Name</label> <input type="text" id="fname" name="fname">
    </form>
</body>
</html>

以上示例作用于所有的 <input> 元素。如果你只想对特定的 input 类型进行式样化，请使用属性选择器：

  • input[type=text] - 只选择 text 栏。
  • input[type=password] - 只选择 password 栏。
  • input[type=number] - 只选择 number 栏。
  • 等等……

Padded Inputs

使用 padding 属性在 text 栏内添加空间。
提示：当有很多输入栏前后排列的时候，我们可以使用 margin 属性以增加输入栏外围空间：

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}

Padded Inputs

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
</style>
</head>
<body>
    <p>Padded text fields:</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>
</html>

注意：我们将 box-sizing 属性设置为 border-box 。这将确保内边距和边框最终位于元素的总宽高之内。在 CSS3 Box Sizing 章节可以查看到更多有关 box-sizing 属性的内容。

补充内容：
补充内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            div {
                padding: 20px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <iframe src="iframe_a.html" width="49.5%" height="300px;"></iframe>
            <iframe src="iframe_b.html" width="49.5%" height="300px;"></iframe>
        </div>
    </body>
</html>

<!-- iframe_a.html -->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    /* box-sizing: border-box; */
}
</style>
</head>
<body>
    <p>Padded text fields: 没有设置 <font color="red">box-sizing</font> 属性。</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>
</html>

<!-- iframe_b.html -->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
</style>
</head>
<body>
    <p>Padded text fields: 设置 <font color="red">box-sizing</font> 属性为 <font color="red">border-box</font> 。</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>
</html>

补充内容

Bordered Inputs

使用 border 属性变更边框的大小和颜色，使用 border-radius 属性以增加弧度：

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}

Bordered Inputs

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid red;
    border-radius: 4px;
}
</style>
</head>
<body>
    <p>Text fields with borders:</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>
</html>

如果你只想要个底部边框，请使用 border-bottom 属性：

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid red;
}
</style>
</head>
<body>
    <p>Text fields with only a bottom border:</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname">
    </form>
</body>
</html>

Colored Inputs

使用 background-color 属性对 input 添加背景色，使用 color 属性变更文本颜色：

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}

Colored Inputs

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #3CBC8D;
    color: white;
}
</style>
</head>
<body>
    <p>Colored text fields:</p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe">
    </form>
</body>
</html>

Focused Inputs

默认情况下，某些浏览器会在 input 栏获得焦点的时候增加 input 栏的外围蓝色轮廓。你可以通过对 input 添加 outline: none; 来去掉这个默认行为。
在 input 栏获得焦点的时候，使用 :focus 选择器对它做出某些改变：

/* 背景蓝 */
input[type=text]:focus {
    background-color: lightblue;
}
/* 边框黑 */
input[type=text]:focus {
    border: 3px solid #555;
}

Focused Inputs

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            div {
                padding: 20px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <iframe src="iframe_a.html" width="49.5%" height="300px;"></iframe>
            <iframe src="iframe_b.html" width="49.5%" height="300px;"></iframe>
        </div>
    </body>
</html>

<!-- iframe_a.html -->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    outline: none;
}

input[type=text]:focus {
    background-color: lightblue;
}
</style>
</head>
<body>
    <p>
        In this example, we use the :focus selector to add a background
        color to the text field when it gets focused (clicked on):
    </p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe">
    </form>
</body>
</html>

<!-- iframe_b.html -->
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}

input[type=text]:focus {
    border: 3px solid #555;
}
</style>
</head>
<body>
    <p>
        In this example, we use the :focus selector to add a black
        border color to the text field when it gets focused (clicked on):
    </p>
    <p>
        Note that we have added the CSS3 transition property to animate
        the border color (takes 0.5 seconds to change the color on focus).
    </p>
    <form>
        <label for="fname">First Name</label>
        <input type="text" id="fname" name="fname" value="John">
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="lname" value="Doe">
    </form>
</body>
</html>

Input with icon/image

如果你想让 input 内有图标，请使用 background-image 属性，并且使用 background-position 对它进行定位。需要注意的是，为了给图标预留空间，我们增大了左侧内边距：

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding-left: 40px;
}

Input with icon/image

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('http://www.w3schools.com/css/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>
    <p>Input with icon:</p>
    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>
</body>
</html>

Animated Search Input

在本例中，当搜索输入栏（search input）获得焦点的时候，我们用 CSS3 的 transition 属性使它的宽动态改变。你将在 CSS3 Transitions 章节学习到更多有关 transition 属性的内容。

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}

Animated Search Input

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('http://www.w3schools.com/css/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>
    <p>Animated search input:</p>
    <form>
        <input type="text" name="search" placeholder="Search..">
    </form>
</body>
</html>

Styling Textareas

提示：使用 resize 属性以阻止 textareas 调整大小（使处于右下角的 "grabber" 失效）：

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

Styling Textareas

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            div {
                padding: 20px;
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div>
            <iframe src="iframe_a.html" width="49.5%" height="300px;"></iframe>
            <iframe src="iframe_b.html" width="49.5%" height="300px;"></iframe>
        </div>
    </body>
</html>

<!-- iframe_a.html -->
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    /* resize: none; */
}
</style>
</head>
<body>
    <p>
        <strong>注意: 
        </strong> 没有设置 <font color="red">resize</font> 属性。
    </p>
    <form>
        <textarea>Some text...</textarea>
    </form>
</body>
</html>

<!-- iframe_b.html -->
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}
</style>
</head>
<body>
    <p>
        <strong>注意: 
        </strong> 设置 <font color="red">resize</font> 属性值为 <font color="red">none</font> 。
    </p>
    <form>
        <textarea>Some text...</textarea>
    </form>
</body>
</html>

Styling Select Menus

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}

Styling Select Menus

<!DOCTYPE html>
<html>
<head>
<style>
select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
</style>
</head>
<body>
    <p>A styled select menu.</p>
    <form>
        <select id="country" name="country">
            <option value="au">Australia</option>
            <option value="ca">Canada</option>
            <option value="usa">USA</option>
        </select>
    </form>
</body>
</html>

Styling Input Buttons

input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

/* Tip: use width: 100% for full-width buttons */

Styling Input Buttons

<!DOCTYPE html>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>
    <p>Styled input buttons.</p>
    <input type="button" value="Button">
    <input type="reset" value="Reset">
    <input type="submit" value="Submit">
</body>
</html>

关于更多如何使用 CSS 样式化按钮的内容，请查看 CSS3 Buttons Tutorial 章节。

柯南道尔2606
关注
专栏目录
CSS基础&表单
weixin_52032313的博客
03-02 1114
css基础&表单
css设置图标居左_CSS基础
weixin_35547906的博客
12-24 2723
CSS基础第一章css基础语法每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值。属性必须放在花括号中，属性与属性值用冒号连接。每条声明用分号结束。属性值与属性值不分先后顺序。选择符{属性：属性值;}div{width:500px; height:500px;}样式的建立：1.内部样式(最好写在中)内部样式表(嵌套到页面中)语法：css语句background:背景色div{wid...
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
HTML+CSS基础示范---表单
weixin_45387160的博客
10-16 615
html基础知识，和css基础。
css 清除表单样式,css form表单样式清除
weixin_39935092的博客
08-03 997
开发项目中表单常用的清楚样式：1、改变placeholder默认字体颜色::-webkit-input-placeholder{color: #333;}:-moz-placeholder{color: #333;}:-moz-placeholder{color: #333;}:-ms-input-placeholder{color: #333;}2、取消input number的上下箭头inpu...
HTMLL+CSS基础——基础标签（表单标签、from）
weixin_66547608的博客
12-29 1729
这是一个 HTML 页面，包含一个简单的表单。该表单使用 HTTP GET 方法将数据提交到 http://www.example.com/review.php，其中包含一些输入字段，让用户输入有关其姓名、电子邮件、评论等方面的信息。该表单还包含下拉菜单、单选按钮、复选框等控件，以便用户填写有关该网站和他们对其的评价、反馈和兴趣的数据。
CSS基础——CSS 列表和表单【学习笔记】
lilien的博客
11-20 2327
CSS 列表和表单 1. 列表标签（重点） 表格是用来显示数据的，列表是用来布局的。 概念： 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表 特点： 列表最大的特点就是 整齐 、整洁、 有序，跟表格类似，但是他可组合自由度会更高。 1.1 无序列表 ul （重点） 无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下： <ul> <li>列表项1</li> <li>列表项2</li> <
CSS基础知识
ashfiqa的博客
01-21 2192
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
【CSS】关于表单样式
一文不值的博客
11-22 4000
在CSS中，如何对表单元素设置样式，包括普通文本框、单选框、复选框、按钮框、下拉框的样式设置
HTML+CSS基础知识
m0_46201565的博客
06-06 3453
HTML+CSS基础文档
pure-css.rar_PURE_pure css 菜单_pure.css够用吗_支付 html
09-23
对于简单的布局和基础样式，Pure CSS 是足够用的。然而，对于更复杂的交互或特定的设计需求，可能需要结合其他库或框架，如 Bootstrap 或 Materialize CSS。 "支付___html" 标签提到了支付功能和 HTML，这意味着这...
dhtml_html_css.rar_css_css 网页_网页 css_网页设计 html_网页设计html
09-21
JavaScript是DHTML的关键，通过它可以响应用户的交互，如点击按钮、填写表单等，同时也可以实现动画效果和页面逻辑。 压缩包中的文件"**dhtml&html&css.chm**"很可能是一个帮助文档，它可能详细介绍了这些技术的...
login_html-css-js.zip_css_html css js_html+css+js_html+js+css_su
09-24
**HTML（HyperText Markup Language）**是网页的基础，用于构建网页的结构。在"login.html"文件中，HTML元素定义了网页的布局和内容，如表单、文本框、按钮等。例如，`<form>`标签创建了一个用户输入数据的区域，`...
css.zip_html css js
09-23
例如，可能会讲解如何使用CSS美化HTML元素，然后通过JavaScript来实现用户交互，如按钮点击响应、表单验证、动态加载内容等。对于初学者来说，理解这三者之间的关系和协同工作原理至关重要，因为它们构成了现代网页...
HTML+XHTML+CSS2_基础教程_PDF文件
04-29
它是网页内容的结构化...通过这个“HTML+XHTML+CSS2_基础教程”，初学者将能够系统地学习前端开发的基础知识，逐步掌握创建静态网页的技能。这份PDF文件对于想要踏入前端开发领域的学习者来说，无疑是一份宝贵的资源。
了解CSS Typed OM
读心悦
10-20 193
CSS Typed OM是一个包含类型和方法的CSS对象模型，它暴露了作为JavaScript对象的值，允许开发人员以类型安全的方式操作CSS。与先前基于字符串的HTMLElement.style操作相比，对JavaScript对象进行操作更符合直觉，且减少了因字符串操作带来的潜在错误。CSS Typed OM是一项具有潜力的技术，它带来了类型安全、性能提升和错误处理等诸多好处。随着浏览器对该标准的支持不断完善，以及更多开发者的加入和推动，CSS Typed OM有望在未来成为前端开发的主流技术之一。
css之动态伪类选择器(超链接)
啥也没有
10-20 675
如何用实现当一个超链接未被访问过是红色，鼠标悬浮是天蓝色，访问返回是灰色，鼠标点击超链接访问是绿色的。
精准布局：探索CSS中的盒子固定定位的魅力
2401_84309743的博客
10-17 454
使元素相对于浏览器窗口进行定位，无论网页如何滚动，固定定位的元素也会保持在相同的位置，设置固定定位的元素脱离文档流。
CSS进阶-定位（二）
最新发布
。
10-20 715
介绍CSS中定位的应用。
Html+Css+Javascript_web开发基础教程
**Css基础知识** 1. Css简介：Css是层叠样式表的缩写，用于美化 Html 文档。 2. Css的优势： Css 可以将样式和结构分离，提高网页的可维护性和可读性。 3. Css的基本语法：选择器、属性、值等。 4. Css样式表的引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值