css浮动练习

最新推荐文章于 2024-03-22 08:59:27 发布
最新推荐文章于 2024-03-22 08:59:27 发布
阅读量542 收藏 1
点赞数 1
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43293348/article/details/108051915
版权

学成网网页展示效果



github地址


html 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/xuechengwang.css">
	</head>
	<body>
		<!-- 头部高100，版心1560 -->
		<div class="header c">
			<div class="logo">
				<img src="images/logo_03.png" alt="">
			</div>
			<div class="nav">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">课程</a></li>
					<li><a href="#">职业规划</a></li>
				</ul>
			</div>
			<div class="search">
				<input type="text" value="输入关键词">
				<button></button>
			</div>
			<div class="user">
				<img src="./images/photo.png" alt="">
				qq-leishui
			</div>
		</div>
		<!-- 第二个盒子高422 -->
		<div class="banner">
			<div class="c">
				<!-- 左边导航栏 -->
				<div class="subnav">
					<ul>
						<li><a href="#">前端开发&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">后端开发&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">移动开发&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">人工智能&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">商业预测&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">云计算&大数据&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">运维&测试&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">UI设计&nbsp;&nbsp;&nbsp; &gt;</a></li>
						<li><a href="#">产品&nbsp;&nbsp;&nbsp; &gt;</a></li>
					</ul>
				</div>
				<!-- 学习栏300*233 -->
				<div class="course">
					<h2>我的课程表</h2>
					<div class="bd">
						<ul>
							<li><h4>继续学习程序语言设计</h4><p>正在学习-使用对象</p></li>
							<li><h4>继续学习程序语言设计</h4><p>正在学习-使用对象</p></li>
							<li><h4>继续学习程序语言设计</h4><p>正在学习-使用对象</p></li>
						</ul>
						<a href="#">全部课程</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品盒子 -->
		<div class="goods c">
		<!-- 精品推荐盒子 -->
			<h3>精品推荐</h3>
			<ul>
				<li><a href="#">JQuery</a></li>
				<li><a href="#">Sqark</a></li>
				<li><a href="#">MySQL</a></li>
				<li><a href="#">JavaWeb</a></li>
				<li><a href="#">MySQL</a></li>
				<li><a href="#">JavaWeb</a></li>
			</ul>
			<a href="#" class="mod">修改兴趣</a>
		</div>
		<div class="box c">
			<div class="hd">
				<h3>精品推荐</h3>
				<a href="#">查看全部</a>
			</div>
			<div class="bd">
				<!-- 229*271 -->
				<ul>
					<li>
						<em>
							<img src="images/hot.png" alt="">
						</em>
						<img src="./images/fir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/sc.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/thir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/four.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/fir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<em>
							<img src="images/new.png" alt="">
						</em>
						<img src="./images/fir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/sc.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/thir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/four.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
					<li>
						<img src="./images/fir.png" alt="">
						<div class="info">
							<h3>Think PHP 5.0 博客系统实战项目演练 </h3>
							<span>高级</span>
							<p>  •  1125人在学习</p>
						</div>
					</li>
				</ul>
			</div>	
		</div>
		<!-- 商品等级盒子 -->
		<div class="upbox c">
			<div class="level">
				<h3>编程入门</h3>
				<ul>
					<li><a href="#">热门</a></li>
					<li><a href="#">初级</a></li>
					<li><a href="#">中级</a></li>
					<li><a href="#">高级</a></li>
				</ul>
			</div>
			<!-- 又一个盒子 -->
			<div class="door c">
				<div class="left">
					<img src="images/php.png" alt="">
				</div>
				<div class="right">
					<div class="happy">
						<img src="images/happy.png" alt="">
					</div>
					<div class="all">
						<ul>
							<li>
								<div class="one">
									<img src="images/ugui.png" alt="">
									<div class="info">
										<h3>Android Hybrid APP开发实战 H5+原生！</h3>
										<span>高级</span>
										<p>  •  1125人在学习</p>
									</div>
								</div>
							</li>
							<li>
								<div class="one">
									<img src="images/ugui.png" alt="">
									<div class="info">
										<h3>Android Hybrid APP开发实战 H5+原生！</h3>
										<span>高级</span>
										<p>  •  1125人在学习</p>
									</div>
								</div>
							</li>
							<li>
								<div class="one">
									<img src="images/ugui.png" alt="">
									<div class="info">
										<h3>Android Hybrid APP开发实战 H5+原生！</h3>
										<span>高级</span>
										<p>  •  1125人在学习</p>
									</div>
								</div>
							</li>
							<li>
								<div class="one">
									<img src="images/ugui.png" alt="">
									<div class="info">
										<h3>Android Hybrid APP开发实战 H5+原生！</h3>
										<span>高级</span>
										<p>  •  1125人在学习</p>
									</div>
								</div>
							</li>
						</ul>
					</div> 
				
			</div>	
		</div>
		<!-- 结尾h420 -->
		<div class="footer">
			<div class="aim">
				<img src="images/logo_03.png" alt="">
				<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
			©2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
				<a href="#">下载APP</a>
			</div>
			<!-- 565*260 -->
			<div class="about">
				<dl>
					<dt>关于学成网</dt>
					<dd><a href="">关于</a></dd>
					<dd><a href="">管理团队</a></dd>
					<dd><a href="">工作机会</a></dd>
					<dd><a href="">客户服务</a></dd>
					<dd><a href="">帮助</a></dd>
				</dl>
				<dl>
					<dt>新手指南</dt>
					<dd><a href="">如何注册</a></dd>
					<dd><a href="">如何选课</a></dd>
					<dd><a href="">如何拿到毕业证</a></dd>
					<dd><a href="">学分是什么</a></dd>
					<dd><a href="">考试未通过怎么办</a></dd>
				</dl>
				<dl>
					<dt>合作伙伴</dt>
					<dd><a href="">合作机构</a></dd>
					<dd><a href="">合作导师</a></dd>
				</dl>
			</div>
		</div>
	</body>
		<!-- 左侧固定的职位盒子 -->
		<!-- <div class="post">
			<ul>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
				<li><a href="#">编程入门</a></li>
			</ul>
		</div> -->
</html>

css 
* {
	   margin: 0;
	   padding: 0;
}

.c {
	width: 1200px;
	margin: 0 auto;
}

body {
	background-color: #f3f5f7;
}

a {
	text-decoration: none;
}

.header {
	height: 40px;
	margin: 30px auto;
}

.logo {
	float: left;
	width: 194px;
	height: 40px;
}

.nav {
	float: left;
	margin-left: 70px;
}

ul li {
	list-style: none;
}

.nav ul li {
	float:left;
}

.nav ul li a {
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 15px;
	font-size: 18px;
	color: #050505;
}

.nav ul li a:hover {
	color: #00a4ff;
	border-bottom: 2px solid #00a4ff;
}

.search {
	float:left;
	margin-left: 80px;
	width: 410px;
	height: 40px;
}

.search input {
	float:left;
	width: 344px;
	height: 38px;
	padding-left: 15px;
	border: 1px solid #00a4ff;
	border-right: 0;
	color: #dfe0e2;
	font-style: 14px;
}

.search button {
	float: left;
	height: 40px;
	width: 50px;
	/* 把按钮默认边框去掉*/
	border: 0;
	background-image: url(../images/btn.png);
}

.user {
	float: right;
	margin-right: 35px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color:#666;	
}

.user img {
	display: inline-block;
	vertical-align:middle;
}

.banner {
	background-color: #1c036c;
	height: 420px;
}

.banner .c {
	height: 420px;
	background-image: url(../images/banner2.png);
}

.banner .c .subnav {
	float:left;
	height: 360px;
	width: 190px;
	padding: 30px 0;
	background-color: rgba(19,1,75,.3);
}

.banner .c .subnav ul li a {
	color: white;
	display:block;
	height: 40px;
	text-indent: 2em;
	font-size: 14px;
	line-height: 40px;
}

.banner .c .subnav ul li a:hover {
	background-color: #1c036c;	
	color: #00b4ff;
}

.course {
	float: right;
	margin-top: 50px;
	height: 300px;
	width: 233px;
	background-color: #fff;
}

.course h2 {
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background-color: #9bceea;
	font-size: 18px;
	color: #FFFFFF;
}

.course .bd {
	padding: 0 20px;
}
.course .bd ul li {
	padding: 15px 0;
	border-bottom: 1px solid #e7e7e7;
}

.course .bd ul li p {
	color: #e7e7e7;
	font-size: 12px;
}

.course .bd ul li h4 {
	font-size: 14px;
	font-style: normal;
	color: #d0d0d0;
	
}

.course .bd a {
	display: block;
	margin-top: 5px;
	width: 198px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border: 1px solid #9cd2ff;
	color: #9cd2ff;
}

.goods {
	height: 40px;
	line-height: 40px;
	box-shadow: 0 2px 2px 2px rgba(0,0,0,.1);
	margin-top: 10px;
	padding: 20px 0;
	background-color: #fff;	
}

.goods h3 {
	float: left;
	margin-left: 30px;
	font-size: 16px;
	color: #00a4ff;
}

.goods ul {
	float: left;
	margin-left: 30px;
}
.goods ul li {
	float: left;
	padding: 0 30px;
	border-left: 1px solid #bfbfbf;
}

.goods ul li a {
	color: #454545;
	font-size: 16px;
}

.goods ul li a:hover {
	color: #00a4ff;
}

.goods .mod {
	display: block;
	float: right;
	margin-right: 25px;
	font-size: 14px;
	color:#42b2ff;
}

.box {
	margin-top: 35px;
	height: 600px;
}

.box hd {
	height: 35px;
	line-height: 35px;
}

.box .hd h3 {
	float: left;
	font-weight: 400;
	font-size: 20px;
	color: #494949;
}

.box .hd a {
	display: block;
	float: right;
	margin-right: 22px;
	font-size: 12px;
	color: #a5a5a5;
}

.box .bd {
	height: 558px;
}

.box .bd ul {
	float: left;
	width: 1220px;
	margin-top: 20px;
}

.box .bd ul li {
	position: relative;
	float: left;
	height: 269px;
	width: 228px;
	margin: 0 15px 15px 0;
	background-color: #fff;
}

.box .bd ul li em img {
	position: absolute;
	top:4px;
	right:-4px;
}

.box .bd ul li >img {
	width: 100%;
}

.box .bd ul li .info {
	padding: 22px 20px 25px 28px;
}

.box .bd ul li .info h3{
	font-size: 14px;
	font-weight: normal;
	color:#050505;
}

.box .bd ul li .info span {
	font-size: 12px;
	color: #ff7c2d;
}

.box .bd ul li .info p {
	display: inline-block;
	font-size: 12px;
	color: #999999;
}

.upbox {
	height: 480px;
	margin-top: 45px;
}

.upbox .level {
	height: 50px;
	line-height: 50px;
}

.upbox .level h3{
	float: left;
	font-size: 20px;
	font-weight: normal;
	color: #494949;
}

.upbox .level ul{
	margin-left: 290px;
	float: left;
}

.upbox .level ul li{
	float: left;
	margin-left: 65px;
}

.upbox .level ul li a{
	font-size: 16px;
	color: #868686;
}

.upbox .level ul li a:hover {
	color: #86c7fc;
}

.upbox .door {
	margin-top: 25px;
	height: 392px;
}

.upbox .door .left {
	display: inline-block;
	float: left;
	height: 392px;
	width: 228px;
}

.upbox .door.left img {
	width: 100%;	
}

.upbox .door .right{
	float: left;
	margin-left: 15px;
	height: 392px;
	width: 957px;
}

.upbox .door .right .happy {
	float: left;
	width: 957px;
	height: 100px;
}

/* .upbox .door .right .happy img {
	width:100%;
}
 */
.upbox .door .right .all {
	float: left;
	height: 270px;
	margin-top:25px;
}

.upbox .right .all ul {
	float: left;
	width: 1000px;
}

.upbox .right .all ul li {
	float: left;
    margin-right: 14px;
}

.upbox .right .all ul li .one {
	width: 228px;
	height: 269px;
	background-color: #fff;
}

.upbox .right .all ul li .one img {
	width: 100%;
}
.upbox .right .all ul li .one .info {
	padding: 22px 20px 25px 28px;
}

.upbox .right .all ul li .one .info h3 {
	font-size: 14px;
	font-weight: normal;
	color:#050505;
}

.upbox .right .all ul li .one .info span {
	font-size: 12px;
	color: #ff7c2d;
}

.upbox .right .all ul li .one .info p {
	display: inline-block;
	font-size: 12px;
	color: #999999;
}

.footer {
	margin-top: 40px;
	height: 420px;
	width: 100%;
	background-color: #fff;
}
.footer .aim {
	float: left;
	margin: 35px 0 0 25px;
	width: 450px;
	height: 200px;
}

.footer .aim p {
	margin: 25px 0;
	font-size: 12px;
	color: #666666;
}

.footer .aim a {
	display: block;
	width: 118px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border: 1px solid #00a4ff;
	color: #00a4ff;
}

.footer .about {
	float: right;
	margin: 35px 10px 0 0;
	width: 565px;
	height: 260px;
}

.footer .about dl {
	float: left;
	margin-right: 65px;
}
.footer .about dl dt {
	color: #9e9e9e;
	font-size: 16px;
}

.footer .about dl dd a {
	margin-top: 12px;
	font-size: 12px;
	color: #333333;
}

.footer .about dl dd a:hover {
	color: #00a4ff;
}

.post {
	position: absolute;
	top: 900px;
	left: 150px;
	height: 430px;
	width: 185px;
}

.post ul li {
	margin-top: 20px;
}

.post ul li a {
	font-size: 14px;
	color: #000;
}

.post ul li a:hover {
	color: #b8ddff;
}

[github地址](https://github.com/dantongzhang/xuechengwang)

跟着b站的pink老师学习前端基础，看完视频自己敲代码练习加深记忆。

我是一只努力飞的菜鸟，大家一起加油吧。
如有错误，请指出，大家一起进步哦！
2020/08/17

一虹
关注
专栏目录
CSS浮动布局练习
m0_46744635的博客
08-17 320
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS浮动</title> <style> *{ padding:0; m
理解CSS浮动（练习实例，附完整代码）
微子细的博客
07-02 812
本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 效果图： 代码： <!-- 仅定义一个父div，然后从左到右，从上到下的顺序 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
CSS浮动练习
08-21
浮动练习
html5 css练习浮动布局
weixin_34342207的博客
10-08 342
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动布局</title> <link rel="stylesheet" type="text/css" href="st1.css"></head>&...
css浮动一个练习
海涛高软
10-04 1148
html代码：<body> <div class="div01">div01</div> <div class="div02"> <div class="nei01">nei1</div> <div class="nei02">nei2</div> <div class="nei03">nei3</div> <div class="nei04">nei4</div>
HTML css浮动练习——猫眼电影网页
coising的博客
01-18 1541
浮动练习——简单的静态猫眼电影页面制作 1.reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big
CSS案例-6.浮动练习
最新发布
m0_46279684的博客
03-22 955
脱离标准流，漂浮起来，不占用原有的位置，浮动在标准流的上面，所以第二个标准流会躲到浮动盒子的下面。浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动的元素。右小盒子：长234px，宽300px，间距14px。小盒子：长269px，宽285px，间距14px。大盒子：长1200px，宽460px。大盒子：长1226px，宽285px。大盒子：长1226px，宽615px。右盒子：长970px，宽460px。左盒子：长234px，宽615px。右盒子：长992px，宽615px。
CSS 浮动布局的练习 Demo，名为 古诗欣赏
09-16
在本文中，我们将深入探讨与"CSS浮动布局"相关的知识点，通过一个名为“古诗欣赏”的练习Demo来学习和理解这一重要概念。这个Demo旨在帮助我们掌握如何利用CSS的浮动特性来实现美观的网页布局。 首先，让我们了解...
CSS基础-3.12 浮动练习
莫听穿林打叶声，何妨吟啸且徐行。
01-05 579
文章目录电影页面制作效果图效果图电影页面制作过程页面主要构成HTML5 代码CSS代码 电影页面制作效果图 效果图 电影海报部分取自哥哥姐姐的结婚照~ 电影页面制作过程 页面主要构成 HTML5 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
css浮动的一些小练习
m0_51045721的博客
02-26 1836
1.小米模块练习 需求： 使用浮动，完成设计图中的布局效果
HTML CSS 浮动练习（仿猫眼电影）
qq_56682205的博客
07-24 1356
html css基础入门DIV布局以及浮动
CSS-float简单练习
弱小无助但胖胖
07-26 294
float嵌套 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>float嵌套</title> <link rel="stylesheet" href="css/nav.css"> </head> <body...
CSS的浮动
yangnuowei88的专栏
09-02 1331
CSS浮动 浮动和绝对定位一样，都让那个元素脱离了原始的文件流（由于浮动后，那些浮动的div不占用空间，最后的一个div就会窜，你这个时候就要清楚浮动）！     【转】 可以看出，即使div1的宽度很小，页面中一行可以容下div1和div2，div2也不会排在div1后边，因为div元素是独占一行的。 注意，以上这些理论，是指标准流中的div。无论多么复杂的布局，其基本出发点
关于浮动的练习
amy0821的博客
08-06 746
编程练习 小伙伴们，根据所学知识，实现如下图所示的简单两列布局，整个页面宽度为960px，背景颜色为#CFF。左侧盒子宽度为740px，背景颜色为#C9F，右侧盒子宽度为210px，背景颜色为#FCF。左侧和右侧盒子的高度均为300px。 效果图: 温馨提示:完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。
浮动练习
WXX的博客
02-18 133
div.movie-item*30>(div.poster>a>img[src=".img/test.jpg"])+(div.name>a>{熊出没之狂野大陆})+(div.score>{9.4})
CSS 浮动
学习记录
07-13 150
一、浮动 1.1 传统网页布局的三种方式 网页布局的本质 – 用CSS来摆放盒子，把盒子摆放到相应位置 CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）: 普通流（标准流） 浮动 定位 1.2 标准流（普通流 / 文档流） 所谓标准流：就是标签按照规定好默认方式排列 块级元素会独占一行，从上向下顺序排列 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行 常用元素：span、a、i、
CSS-结构浮动及盒模型简单练习
弱小无助但胖胖
01-19 496
在上一篇博客中，我简单介绍了一下浮动和清除浮动的使用，这次以一张网页设计图（图片来源于网络）为模板来练习一下。 当然作为新手，我们要从简单的开始，以覆盖色块（使用Photoshop添加纯色图层）的形式，我将这张设计图做成了一张色块图。 开始之前，我们需要先测量一些即将使用到的数据，这里推荐使用PxCook（像素大厨），一个高效易用的自动标注工具。工具栏中的距离标注、区域标注及颜色标注等可以帮助我们...
浮动的练习
g960526的博客
04-09 660
浮动的练习 浮动和行块标签的作用差不多,但是浮动比行块标签的优点多,而且还有行块标签做不到的事情,浮动也能做到,所以在平时做题中遇到的还是挺多的; 这次做一个简单的关于浮动的基本练习,练习中的图片连接地址可以自己随便找图片替代 源代码如下: <!doctype html> <!-- 文档类型 --> <html> <head> <!-- ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值