移动web个人笔记

  1. day01

结构伪类选择器

:first-child 匹配父元素中的第一个子元素

:last-child 匹配父元素中最后一个元素

:nth-child(n) 匹配父元素中的第n个子元素

first-of-type 指定类型的第一个

last-of-type 指定类型的最后一个

nth-of-type(n) 指定类型E的第n个

nth-child(n) n可以是数字,关键字和公式 n如果是数字,就是选择第n个 常见的关键词  even 偶数 odd 奇数 常见的公式如下 ( 如果n是公式,则从0开始计算) 但是 第0个元素或者超出了元素的个数会被忽略 )

公式

取值

2n

偶数

2n+1

奇数

5n

5   10   15 ...

n+5

从第5个开始(包含第五个)到最后

-n+5

前5个(包含第5个)...

结构伪类选择器就是选择第n个 Nth-child从所有子级开始算的,可能不是同一种类型 Nth-of-type 是指定同一种类型的子级,比如 ul li:nth-of-type(2) 是选择第2个li 关于nth-child(n) 我们要知道n从0开始计算的,要记住常用的公式 如果是无无序列表,我们肯定用 nth-child 更多

伪元素选择器

选择符

简介

::before

在元素内部的前面插入内容

::after

在元素内部的后面插入内容

before 和 after 必须有 content 属性 before 在内容的前面,after 在内容的后面 before 和 after 创建一个元素,但是属于行内元素。 因为在 dom 里面看不见刚才创建的元素,所以我们称为伪元素 伪元素和标签选择器一样,权重为 1

CSS3 2D转换

转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果转换(transform)你可以简单理解为变形

移动:translate 旋转:rotate 缩放:scale

2D 转换之移动 translate

2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位

语法:

transform:translate(x,y); 或者分开写

transform:translateX(n);

transform: translateY(n);

定义 2D 转换中的移动,沿着X 和 Y 轴移动元素 translate最大的优点:不会影响到其他元素的位置 translate中的百分比单位是相对于自身元素的 translate:(50%,50%); 对行内标签没有效果

2D 转换之旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

语法:transform:rotate(度数) rotate里面跟度数, 单位是 deg  比如  rotate(45deg) 角度为正时,顺时针,负时,为逆时针 默认旋转的中心点是元素的中心点

2D 转换中心点 transform-origin

我们可以设置元素转换的中心点

语法:transform-origin:x y; 注意后面的参数 x 和 y 用空格隔开x y ,默认转换的中心点是元素的中心点(50%  50%) 还可以给x y 设置 像素 或者  方位名词  (top  bottom left  right  center)

2D 转换之缩放scale

缩放,顾名思义,可以放大和缩小。 只要给元素添加上了这个属性就能控制它放大还是缩小。

语法:transform:scale(x,y);

注意其中的x和y用逗号分隔 transform:scale(1,1) :宽和高都放大一倍,相对于没有放大 transform:scale(2,2) :宽和高都放大了2倍 transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2) transform:scale(0.5,0.5):缩小 sacle缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

2D 转换综合写法

1.  同时使用多个转换,其格式为:transform: translate() rotate()scale() ...等,

2.  其顺序会影转换的效果。(先旋转会改变坐标轴方向)

3.  当我们同时有位移和其他属性的时候,记得要将位移放到最前

2D 转换总结 转换transform 我们简单理解就是变形 有2D 和 3D 之分 我们暂且学了三个 分别是 位移 旋转 和 缩放 2D 移动 translate(x,y)   最大的优势是不影响其他盒子, 里面参数用%,是相对于自身宽度和高度来计算的 可以分开写比如 translateX(x)  和 translateY(y) 2D 旋转 rotate(度数)    可以实现旋转元素   度数的单位是deg 2D 缩放 sacle(x,y)   里面参数是数字 不跟单位 可以是小数   最大的优势 不影响其他盒子 设置转换中心点 transform-origin : x y;    参数可以百分比、像素或者是方位名词 当我们进行综合写法,同时有位移和其他属性的时候,记得要将位移放到最前

渐变

使用background-image属性添加渐变背景效果

基本写法

background-image: linear-gradient(

颜色1,

颜色2,

......

);

透明渐变

background-image: linear-gradient(

transparent,

rgba(0, 0, 0, .6)

);

  1. day02

CSS3 3D转换

特点: 近大远小。 物体后面遮挡不可见

三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的

x轴:水平向右      注意: x 右边是正值,左边是负值

y轴:垂直向下      注意: y 下面是正值,上面是负值

z轴:垂直屏幕      注意: 往外面是正值,往里面是负值

3D位移: translate3d(x,y,z)

3D旋转: rotate3d(x,y,z)

透视: perspective

3D呈现 transfrom-style

translform:translateX(100px):仅仅是在x轴上移动  translform:translateY(100px):仅仅是在Y轴上移动 translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位) transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离 

因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动

透视 perspective

透视写在被观察元素的父盒子上面的

d:就是视距,视距就是一个距离人的眼睛到屏幕的距离。

z:就是 z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大

translateZ

translform:translateZ(100px):仅仅是在Z轴上移动。有了透视,就能看到translateZ 引起的变化了 ranslateZ:近大远小 translateZ:往外是正值 translateZ:往里是负值 

3D旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着 x轴,y轴,z轴或者自定义轴进行旋转。

语法: transform:rotateX(45deg):沿着x轴正方向旋转 45度 transform:rotateY(45deg) :沿着y轴正方向旋转 45deg transform:rotateZ(45deg) :沿着Z轴正方向旋转

45degtransform:rotate3d(x,y,z,deg): 沿着自定义轴旋转deg为角度(了解即可)

左手准则 左手的手拇指指向 x轴的正方向 其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D呈现 transfrom-style 控制子元素是否开启三维立体环境。。 transform-style: flat 子元素不开启3d立体空间 默认的 transform-style: preserve-3d; 子元素开启立体空间 代码写给父级,但是影响的是子盒子 这个属性很重要,后面必用

CSS3 动画

动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。

动画的基本使用

制作动画分为两步:

1.先定义动画

2.再使用(调用)动画

 用keyframes 定义动画(类似定义类选择器)

语法:@keyframes 动画名称 {

   0%{        width:100px;

   }    100%{         width:200px;

   }

}

动画序列: 0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。 在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。

动画常用属性

属性

描述

@keyframes

规定动画。

animation

所有动画属性的简写属性,除了animation-play-state属性。

animation-name

规定@keyframes动画的名称。(必须的)

animation-duration

规定动画完成一个周期所花费的秒或毫秒,默认是0。(必须的)

animation-timing-function

规定动画的速度曲线,默认是“ease”。

animation-delay

规定动画何时开始,默认是0。

animation-iteration-count

规定动画被播放的次数,默认是1,还有infinite

animation-direction

规定动画是否在下一周期逆向播放,默认是“normal“,alternate逆播放

animation-play-state

规定动画是否正在运行或暂停。默认是"running",还有"paused"。

animation-fill-mode

规定动画结束后状态,保持forwards回到起始backwards

动画简写属性

animation:动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态;

animation:myfirst 5s linear 2s infinite alternate; 简写属性里面不包含 animation-play-state 暂停动画:animation-play-state:   puased;  经常和鼠标经过等其他配合使用  想要动画走回来 ,而不是直接跳回来:animation-direction   :  alternate 盒子动画结束后,停在结束位置:  animation-fill-mode  :   forwards

速度曲线细节

animation-timing-function:规定动画的速度曲线,默认是“ease”

描述

linear

动画从头到尾的速度是相同的。匀速

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

steps()

指定了时间函数中的间隔数量(步长)

逐帧动画

作用

精灵动画

搭配精灵图使用

核心

动画速度曲线为steps(N)

N与精灵图小图个数相同

1.显示区域-一张小图的尺寸,背景为当前精灵图

2.定义动画:改变背景图位置,(移动距离就是精灵图宽度)

3.使用动画,添加速度曲线,动画速度曲线为steps(N),N与精灵图小图个数相同

多组动画

作用:一个元素添加多个动画效果

写法

animation: 动画1,动画2,动画N;

  1. day03

视口

视口就是浏览器显示页面内容的屏幕区域

视口分为布局视口、视觉视口和理想视口

我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽

想要理想视口,我们需要给我们的移动端页面添加 meta视口标签

二倍图

 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8  是  750*1334 我们开发时候的1px 不是一定等于1个物理像素的 PC端页面,1个px 等于1个物理像素的,但是移动端就不尽相同 一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

 背景缩放background-size

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度; 单位:  长度|百分比|cover|contain; cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

 CSS3 盒子模型box-sizing

l  传统模式宽度计算:盒子的宽度 =  CSS中设置的width + border + padding

l  CSS3盒子模型:    

盒子的宽度 = CSS中设置的宽度width 里面包含了border 和 padding 也就是说,我们的CSS3中的盒子模型, padding 和 border 不会撑大盒子了

流式布局(百分比布局)

流式布局,就是百分比布局,也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

max-width   最大宽度 (max-height  最大高度) 

min-width    最小宽度 (min-height  最小高度)

flex 布局

flex 弹性布局 操作方便,布局极为简单,移动端应用很广泛 PC 端浏览器支持情况较差 IE 11或更低版本,不支持或仅部分支持

flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。

布局原理 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和vertical-align 属性将失效。 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局

总结flex布局原理:

就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

flex 布局父项常见属性

以下由6个属性是对父元素设置的 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行  align-content:设置侧轴上的子元素的排列方式(多行) align-items:设置侧轴上的子元素排列方式(单行) flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

flex-direction 设置主轴的方向

主轴与侧轴

在flex 布局中,是分为主轴和侧轴两个方向,同样的叫法有 : 行和列、x 轴和y 轴 默认主轴方向就是 x 轴方向,水平向右 默认侧轴方向就是 y 轴方向,水平向下

flex-direction 属性决定主轴的方向

注意: 主轴和侧轴是会变化的,就看 flex-direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

属性值

row

默认值从左到右

row-reverse

从右到左

column

从上到下

column-reverse

从下到上

 justify-content 设置主轴上的子元素排列方式

justify-content 属性定义了项目在主轴上的对齐方式注意: 使用这个属性之前一定要确定好主轴是哪个

属性值

说明

flex-start

默认值 从头部开始  如果主轴是x轴,则从左到右

flex-end

从尾部开始排列

center

在主轴居中对齐(如果主轴是x轴则 水平居中)

space-around

 平分剩余空间

space-between

 先两边贴边 再平分剩余空间(重要)

flex-wrap 设置子元素是否换行

flex-wrap属性定义,flex布局中默认是不换行的。

属性值

nowrap

默认值,不换行

wrap

换行

align-items 设置侧轴上的子元素排列方式(单行 )

该属性是控制子项在侧轴(默认是y轴)上的排列方式  在子项为单项(单行)的时候使用

属性值

说明

flex-start

       从上到下

flex-end

从下到上

center

挤在一起居中(垂直居中)

stretch

 拉伸  (默认值  )

align-content  设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式 并且只能用于子项出现换行 的情况(多行),在单行下是没有效果的。

属性值

说明

flex-start

默认值在侧轴的头部开始排列

flex-end

在侧轴的尾部开始排列

center

在侧轴中间显示

space-around

 子项在侧轴平分剩余空间

space-between

 子项在侧轴先分布在两头,再平分剩余空间

stretch

设置子项元素高度平分父元素高度

align-content 和 align-items 区别 align-items  适用于单行情况下, 只有上对齐、下对齐、居中和 拉伸 align-content 适应于换行(多行)的情况下(单行情况下无效), 可以设置 上对齐、 下对齐、居中、拉伸以及平均分配剩余空间等属性值。 总结就是单行找 align-items  多行找 align-content

 flex-flow 属性是 flex-direction 和flex-wrap 属性的复合属性

flex布局父项常见属性

flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行  align-content:设置侧轴上的子元素的排列方式(多行) align-items:设置侧轴上的子元素排列方式(单行) flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

flex布局子项常见属性 flex 子项目占的份数 align-self 控制子项自己在侧轴的排列方式order属性定义子项的排列顺序(前后顺序)

 flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。

align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。

  1. day04

rem 基础

rem (root em)是一个相对单位,类似于em,em是父元素字体大小。

设置网页元素的尺寸

不同的是rem的基准是相对于html元素的字体大小。

比如,根元素(html)设置font-size=12px;非根元素设置width:2rem; 则换成px表示就是24px。

rem的优势:父元素文字大小可能不一致,但是整个页面只有一个html,可以很好来控制整个页面的元素大小

媒体查询 使用 @media 查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机、Android手机,平板等设备都用得到多媒体查询

 语法规范: 用 @media 开头 注意@符号 mediatype  媒体类型 关键字 and  not  only media feature 媒体特性 必须有小括号包含

and:可以将多个媒体特性连接到一起,相当于“且”的意思。 not:排除某个媒体类型,相当于“非”的意思,可以省略。 only:指定某个特定的媒体类型,可以省略。   

all

用于所有设备

print

用于打印机和打印预览

scree

用于电脑屏幕,平板电脑,智能手机等

 媒体特性

解释说明

width

定义输出设备中页面可见区域的宽度

min-width

定义输出设备中页面最小可见区域宽度

max-width

定义输出设备中页面最大可见区域宽度

媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的,有了rem页面元素可以设置不同大小尺寸媒体查询可以根据不同设备宽度来修改样式媒体查询+rem  就可以实现不同设备宽度,实现页面元素大小的动态变化

 Less 基础

Less (Leaner Style Sheets 的缩写) 是一门 CSS 扩展语言,也成为CSS预处理器。

做为 CSS 的一种形式的扩展,它并没有减少 CSS 的功能,而是在现有的 CSS 语法上,为CSS加入程序式语言的特性。

它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,Less 可以让我们用更少的代码做更多的事情。

Less 是一门 CSS 预处理语言,它扩展了CSS的动态特性。

 Less 嵌套

如果遇见 (交集|伪类|伪元素选择器)内层选择器的前面没有 & 符号,则它被解析为父选择器的后代;如果有 & 符号,它就被解析为父元素自身或父元素的伪类。

任何数字、颜色或者变量都可以参与运算。就是Less提供了加(+)、减(-)、乘(*)、除(/)算术运算。

注意: 乘号(*)和除号(/)的写法   运算符中间左右有个空格隔开 1px + 5 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位 如果两个值之间只有一个值有单位,则运算结果就取该单位

使用Less变量设置属性值

变量:存储数据,方便使用和修改

把常用的属性添加到存储到一个容器,设置属性值为这个容器名

语法:定义变量:@变量名 : 值

使用变量:css属性:@变量名

语法

注释:单行

// 注释内容

ctrl + /

/* 注释内容 */

alt + shift + A

嵌套:作用

生成后代选择器

写法

父选择器 {

子选择器{}

}

&

表示当前选择器, 不会生成后代选择器

运算:作用

完成常用数学计算

写法:除法

(xx / xx)

xx ./ xx

变量:作用存储数据,方便修改和使用

用法:

1. 定义变量:

@变量名: 值;

2. 使用变量:

CSS属性: @变量;

导入:作用

引入其他less文件

写法

@import: ‘文件及路径’;

导出

导出CSS文件

控制所有Less导出路径

修改EasyLess插件

1. 设置 → 搜索easy → 在settings.json中编辑

2. 添加代码:"out": "目标存储路径"(文件夹以/结束)

单独控制某个Less文件导出路径

less文件第一行添加 // out:路径

禁止导出CSS文件

less文件第一行添加: // out: false

  1. day05

vw和vh基本使用

vw和vh为相对单位,相对视口尺寸计算结果

1vw = 1/100视口宽度

1vh = 1/100视口高度

布局流程

1. 根据设计稿确定1vw尺寸

2. px单位转换成vw单位尺寸

px / (1/100视口宽度)

vh弊端

vh是相对视口高度计算尺寸

需要考虑全面屏,视口高度尺寸偏大

vw适配原理

1.确定设计稿对应的vw尺寸(1/100视口宽度)

2.vw单位尺寸 = px单位数值(1/100视口宽度)

响应式布局开发原理

设备划分

尺寸区间

超小屏幕(手机)

< 768px

小屏设备(平板)

>= 768px  ~  < 992px

中等屏幕(桌面显示器)

>= 992px  ~ 

宽屏设备(大桌面显示器)

>= 1200px

响应式布局容器

响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。

Bootstrap前端开发框架

Bootstrap 来自Twitter(推特),是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

中文官网:Bootstrap中文网

官网:Bootstrap · The most popular HTML, CSS, and JS library in the world.

推荐使用:http://bootstrap.css88.com/ 

框架:顾名思义就是一套架构,它有一套比较完整的网页功能解决方案,而且控制权在框架本身,有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

优点: 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈,不断的更新迭代 让开发更简单,提高了开发的效率

Bootstrap 使用四步曲: 1. 创建文件夹结构  2. 创建 html 骨架结构  3. 引入相关样式文件  4. 书写内容

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,它提供了两个作此用处的类。

 container 类2. container-fluid 类

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,它是指将页面布局划分为等宽的列,然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

超小屏幕(手机)

< 768px

小屏设备(平板)

>=768px

中等屏幕(桌面显示器)

>=992px

宽屏设备(大桌面显示器)

>=1200px

.container 最大宽度

自动(100%)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

按照不同屏幕划分为1~12 等份 行(row) 可以去除父容器作用15px的边距 xs-extra small:超小; sm-small:小; md-medium:中等; lg-large:大; 列(column)大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列 每一列默认有左右15像素的 padding 可以同时为一列指定多个设备的类名,以便划分不同份数  例如class="col-md-4 col-sm-6"

列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序。

 响应式工具

为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

类名

超小屏

小屏

中屏

大屏

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

Bootstrap 其他(按钮、表单、表格)请参考Bootstrap 文档。

使用Bootstrap插件实现常见的交互效果

引入Bootstrap样式

引入js文件:JQuery.js+Bootstrap.min.js

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值