前端学习-day14

于 2024-09-07 21:06:13 发布
阅读量538 收藏 3
点赞数 2
文章标签： 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qyk666/article/details/142003501
版权

文章目录

01-媒体查询

<!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>
        /* 屏幕宽度小于等于768，网页背景色是粉色 */
        @media(max-width:768px){
            body{
                background-color: pink;
            }
        }

        /* 屏幕宽度大于等于1200，网页背景是绿色 */
        @media(min-width:1200px){
            body{
                background-color: pink;
            }
        }
    </style>
</head>
<body>
    
</body>
</html>

02-媒体查询-书写顺序

<!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>
        /*   <!-- 从小到大写 --> */
        body{
            background-color: #ccc;
        }
        @media(min-width:768px){
            body{
                background-color: pink;
            }
        }
        @media(min-width:992px){
            body{
                background-color: green;
            }
        }
        @media(min-width:1200px){
            body{
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>
  

</body>
</html>

03-媒体查询

<!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;
        }
        .box{
            display: flex;
        }
        .left{
            width: 300px;
            height: 500px;
            background-color: pink;
        }
        .right{
            flex: 1;
            height: 500px;
            background-color: green;
        }
        @media(max-width:768px){
            /* 隐藏左侧的粉盒子 */
            .left{
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left">left</div>
        <div class="right">dbsh恨不得不得不都会觉得吧v和的环境司机阿尔法会如何南方人是甲方缴纳skier哦首都机场你可能才看到你几年
            级的农村电视剧大奖吉萨大夫人警方南昌南昌彻底解决彻底解除冻结你拒绝
        </div>

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

在这里插入图片描述
在这里插入图片描述

04-媒体查询-link引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" media="(max-width:768px)" href="./css/pink.css">
    <link rel="stylesheet" media="(min-width:1200px)" href="./css/green.css">
</head>
<body>
    
</body>
</html>

在这里插入图片描述

06-Bootstrap-使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href=".//bootstrap/css/bootstrap.min.css">
    <style>
        div{
            height: 50px;
            width: 50px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">1</div>
</body>
</html>

在这里插入图片描述

07-Bootstrap-栅格系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- 
    视口宽度大于等于1200px，一行排4个盒子（最起码有四个盒子）
    视口宽度大于等于768px，一行排2个盒子
    视口宽度大于等于576px，一行排1个盒子

     -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">2</div>
            <div class="col-xl-3 col-md-6 col-sm-12">3</div>
            <div class="col-xl-3 col-md-6 col-sm-12">4</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

08-Bootstrap-按钮样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-sm">按钮1</button>

    <button class="btn btn-warning btn-lg">按钮1</button>
</body>
</html>

在这里插入图片描述

09-Bootstrap-表格样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <table class="table table-striped table-hover">
        <tr class="table-success">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>张胜男</td>
            <td>19</td>
            <td>男</td>
        </tr>
        <tr>
            <td>张胜男</td>
            <td>19</td>
            <td>男</td>
        </tr>
        <tr>
            <td>张胜男</td>
            <td>19</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

10-bootstrap组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <style>
        .bg-body-tertiary{
            background-color: pink !important;
        }
    </style>
</head>
<body>
    <!-- 
        1.引入样式表
        2.引入js
        3.复制结果，修改内容
    -->

    <!-- 导航 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">家</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">特征</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">图片</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">展示</a>
              </li>
            </ul>
          </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./img/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="./img/1.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

11-bootstrap字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/font/bootstrap-icons.min.css">
    <style>
        .bi-android2{
            color: aqua;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <i class="bi bi-android2"></i>
</body>
</html>

在这里插入图片描述

alloyTeam项目

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>腾讯前端</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
        <!-- 将container-fluid改为container起到一个版心居中的作用 -->
        <div class="container">
          <a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">首页</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">博客</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Github</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled"><i class="bi bi-fire"></i>TWeb Conf</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">SuperSter</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">Web前端导航</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled">关于</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>

          
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
           
          </div>
          <div class="carousel-item">
            
          </div>
          <div class="carousel-item">
            
          </div>
          <div class="carousel-item">
            
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>

    <!-- 开源项目 -->
    <div class="project container">
      <div class="title">
        <h2>OpenSource / 开源项目</h2>
        <p>种类众多的开源项目，让你爱不释手</p>
      </div>

      <div class="content">
        <div class="row">
          <!-- 内边距不会填充子级的背景色 -->
          <div class="col-lg-3 col-md-6 box">
            <a href="#">
              <div><img src="./assets/images/omi.png" alt=""></div>
              <div class="text">
                <h2>omi</h2>
                <p>开放现代的Web组件化框架</p>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 box">
            <a href="#">
              <div><img src="./assets/images/omi.png" alt=""></div>
              <div class="text">
                <h2>omi</h2>
                <p>开放现代的Web组件化框架</p>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 box">
            <a href="#">
              <div><img src="./assets/images/omi.png" alt=""></div>
              <div class="text">
                <h2>omi</h2>
                <p>开放现代的Web组件化框架</p>
              </div>
            </a>
          </div>
          <div class="col-lg-3 col-md-6 box">
            <a href="#">
              <div><img src="./assets/images/omi.png" alt=""></div>
              <div class="text">
                <h2>omi</h2>
                <p>开放现代的Web组件化框架</p>
              </div>
            </a>
          </div>
      </div>
      </div>
    </div>
    <script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

index.less

//out:../css/
// 导航栏
.bg-body-tertiary{
    // 透明色
    background-color: transparent !important;
    .navbar-collapse{
        flex-grow: 0;
        .nav-link{
            color: white;
        }
        .navbar-nav .nav-link.active{
            color:yellow;
        }
    }
}
// 轮播图
.carousel{
    // 媒体查询 轮播图：小于768 图片高度250 大于等于768图片高度400 大于等于992图片高度500
    @media (max-width:768px) {
        .carousel-item{
            height: 250px;
        }
    } 
    @media (min-width:768px) {
        .carousel-item{
            height: 400px;
        }
    } 
    @media (min-width:992px) {
        .carousel-item{
            height: 500px;
        }
    } 
    .carousel-item{
        // height: 500px;
        background-size: cover;
        background-position: center 0;
    }
    .carousel-item:nth-child(1){
        background-image: url(../assets/uploads/banner_1.jpg);
    }
    .carousel-item:nth-child(2){
        background-image: url(../assets/uploads/banner_2.jpg);
    }
    .carousel-item:nth-child(3){
        background-image: url(../assets/uploads/banner_3.jpg);
    }
    .carousel-item:nth-child(4){
        background-image: url(../assets/uploads/banner_4.jpg);
    }
}


// 开源项目
// 视口宽度大于992：一行排四个 
// 视口宽度大于768：一行排两个
.project{
    margin-top: 60px;
    // 这行代码的作用是让开源项目这个盒子里面的所有小盒子以及里的文字水平居中
    text-align: center;
    .row{
        .box{
            height: 200px;
            // box有内边距是让box和a之间有白边
            padding: 10px;
            a{
                text-decoration: none;
                // 块级元素的高度和父级的一样的大
                display: block;
                // a的内边距是让a里面的字不那么靠近边缘
                padding: 20px;
                
                .text{
                    color: white;
                    h2{
                        margin-top: 7px;
                    }
                }
            }
            &:nth-child(1) a{
                background-color: pink;
            }
            &:nth-child(2) a{
                background-color: yellowgreen;
            }
            &:nth-child(3) a{
                background-color: skyblue;
            }
            &:nth-child(4) a{
                background-color: red;
            }
        }
        
    }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

heibut不相信眼泪
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习--Day06
Cure The World的博客
08-27 905
选择器 元素选择器 用标签名作为选择器，选中所有相应的元素 类选择器 根据class的属性来选择元素，样式定义为：.classname { } ID选择器 根据id名来选择元素，样式定义为：#idname{ } 属性选择器 选择器 描述 [attribute] 选取带有指定属性的元素。12456 [attribute=value] 选取带有指定属性和值的元素。6 [attribute~=value] 选取属性值中包含指定词汇的元素。456 [attribute|=value]
前端学习--Day03
Cure The World的博客
08-24 3567
1、table的介绍 2、table合并单元格及其他基础标签案例 3、div的介绍 4、块级标签与行内标签的行内块标签的特点以及区别
前端学习--Day04
Cure The World的博客
08-25 1697
1.css基本概念 2.选择器 3.三种连接方式 4字体相关属性
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3990
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
系统学习前端之CSS---day04
weixin_63522291的博客
12-25 1661
文本的baseline是字母x的下方inline-block默认的baseline 是margin-bottom的底部，没有margin就是盒子底部inline-block有文字的时候，baseline是最后一行文本x的下方vertical-align这个属性的各种值理解baselin（默认值）：基线对齐top：把行内级盒子的顶部和line box顶部对齐middle：行内级盒子的中心点与父盒子基线加上x-height一半的线对齐。
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
宜立方商场文档 day01-至-day14（全）.zip
01-29
开发过程中，学员将学习如何运用前端技术如HTML、CSS、JavaScript实现页面交互，以及后端技术如Java、Python或PHP进行业务逻辑处理。数据库操作、API接口设计、安全性考虑等都是这一阶段的重点。 4. **系统完善与...
a-nice-day:接下来学习前端的日子
05-01
在"a-nice-day-master"这个项目中，你可以找到一个关于前端学习的实例，可能包含了上述某些概念的实际应用。通过实践，你可以更好地理解和掌握JavaScript在前端开发中的运用。记住，持续学习和不断练习是提升技能的...
Vue2 中对数组进行操作时需要注意什么
m0_73882020的博客
09-06 461
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 952
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 539
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
web开发
2301_76876837的博客
09-04 448
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
使用Selenium WebDriver来检测网页上的坏链接
C'mon的博客
09-07 586
坏链接是指那些不可达的链接或URL，它们可能是由于某些服务器错误而导致无法访问。一个URL通常会有一个有效的状态码2xx。对于无效的请求，HTTP状态码是4xx（客户端错误）或5xx（服务器端错误）。我们通常需要点击链接来确认它是否工作，否则很难确定。
Nginx部署前端Vue项目
不会代码的小林
09-03 1328
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
浅析前端数据埋点监控：用户行为与性能分析的桥梁
dsgdauigfs的博客
09-03 1056
总的来说，前端埋点技术不仅是提升用户体验和产品运行效率的利器，更是实现数据驱动决策的重要工具。随着各类专业工具的出现，如腾讯有数、百度统计和微软Clarity，企业可以根据需求选择最适合的工具进行数据分析和优化，从而在竞争激烈的市场中保持领先地位。通过深入理解用户行为和性能数据，企业能够做出更明智的决策，推动业务持续发展，实现长期成功。通过本文的介绍，希望能够帮助前端开发者和产品团队更好地理解数据埋点的重要性，掌握实施数据埋点的方法，从而在实际工作中发挥其最大的价值。努力的小雨。
【HTTP、Web常用协议等等】前端八股文面试题
Una的博客
09-01 1487
前端面试中，会被问到网络协议等问题。 欢迎大家订阅 我创作的《前端八股文面试题》专栏。
前端技术演进与未来发展趋势探究
最新发布
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
09-07 1477
本文深入探讨了前端领域的发展历程、主要技术及未来趋势。从前端技术的起源与早期发展，到动态页面的崛起，再到如今各种先进技术的涌现，我们见证了前端技术的不断演进。在发展历程方面，前端从最初的静态网页逐渐发展为复杂的动态交互界面。早期浏览器的竞争推动了技术的进步，而随着互联网的发展，后端框架的出现解决了后台代码庞大臃肿的问题。前端技术也从“网页三剑客”演变为新的“三剑客”，即 HTML、CSS 和 JavaScript，同时各种前端框架不断涌现，大大提高了开发效率和质量。
【nodejs】windows切換nodejs版本集成webstorm
突围
09-04 204
nodejs切换版本
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值