html5+css3 基础

最新推荐文章于 2024-05-23 16:52:46 发布
最新推荐文章于 2024-05-23 16:52:46 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： html5 css3

html5相关基础

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Html5基础</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
 </head>
 <body>
  html5 语义标签：
  header 头标签
  nav 导航标签
  aside 侧标签
  article 文章标签
  footer 页脚标签
  section 章节标签

  表单属性:
   required:必填
   placeholder：提示
   autofocus:自动获取焦点
   <form>
		<input type="text" name="username" required placeholder="请填写..." autofocus />
		<input type="submit" name="submit" value="提交">
   </form>

  input 标签的 type属性：
  <form>
	邮件:<input type="email" name="email">
	日期:<input type="date" name="date">
	网址:<input type="url" name="url">
	手机号:<input type="number" name="number">
    亮度:<input type="range" name="range" min="0" max="255">
	颜色:<input type="color" name="color">
	地址:
	<select>
		<optgroup label="北京">
			<option>天河区</option>
			<option>越秀区</option>
		</optgroup>
		<optgroup label="长沙">
			<option>芙蓉区</option>
			<option>天心区</option>
		</optgroup>
	</select>

	html5 新增 datelist：
	<datalist id="gift">
		<option>奥迪</option>
		<option>迪奥</option>
		<option>奥利奥</option>
	</datalist>
	<input type="text" list="gift">

    <input type="submit" name="submit" value="提交">
   </form>

<Br><Br>
R:<input id="txtR" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
G:<input id="txtG" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
B:<input id="txtB" type="range" name="range" min="0" max="255" value="0"><span>255</span><Br>
 <script type="text/javascript">
 $(function(){
	$("input[type=range]").change(function(e){
		var red=$("#txtR").val();
		var green=$("#txtG").val();
		var blue=$("#txtB").val();
		$(this).next().html($(this).val());
		$("body").css("background-color","rgb("+red+","+green+","+blue+")");
	});
 });
 //$(document).ready(function(e){});
 </script>
<br><br>
 音频播放（支持.mp3,.ogg）:<br>
 autoplay:自动播放<br>
 controls:显示控制面板<br>
 第一种:<br>
 <audio src="test.mp3" autoplay="autoplay" controls="controls" >不支持该音频格式!</audio><br>

 第二种:<br>
 <audio autoplay="autoplay" controls>	
    <source src="test.mp3"></source>
	<source src="test.ogg"></source>
 </audio><br>


  视频播放:<br>
  <video autoplay="autoplay" controls="controls">
	<source src="test.mp4">
	<source src="test.ogg">
	<source src="test.webm">
  </video><br>

  音乐导航:<br>

	<ul id="nav">
		<li class="liclick">我的主页</li>
		<li>新闻头条</li>
		<li>电 视 剧</li>
		<li>最新电影</li>
		<li>小游戏</li>
		<li>小说大全</li>
		<li>旅游度假</li>
		<li>今日团购</li>
		<li>品牌特卖</li>
	</ul>
	<audio src="1.mp3"></audio>
	<audio src="2.mp3"></audio>
	<audio src="3.mp3"></audio>
	<audio src="4.mp3"></audio>
	<audio src="5.mp3"></audio>
	<audio src="6.mp3"></audio>
	<audio src="7.mp3"></audio>
	<audio src="8.mp3"></audio>
	<audio src="9.mp3"></audio>
  <style>
	#nav{
		list-style-type:none;
		margin:5px auto 0px;
		width:960px;
		height:38px;
		color:#333;
		font-size:14px;
		padding:0px;
		overflow:hidden;
	}
	#nav li{
		width:105px;
		height:36px;
		float:left;
		text-align:center;
		line-height:38px;
		border-top:#C9CBCE solid 1px;
		border-left:#C9CBCE solid 1px;
		border-bottom:#C9CBCE solid 1px;
		cursor:pointer;
	}
	#nav li:last-child{
		border-right:#C9CBCE solid 1px;
	}

	#nav .liclick{
		border-top:#45B82A solid 1px;
		border-bottom:none;
	}
	#nav span{
		width:100%;
		height:38px;
		position:relative;
		display:block;
		z-index:-1;
	}
  </style>
  <script>
	$(function(){
		//导航点击效果
		$("#nav li").click(function(){
			$(".liclick").removeClass("liclick");
			$(this).addClass("liclick");
		});
		
		//导航背景效果
		$("#nav li").append("<span>");
		var colors=["#B9D329","#C0EBF7","#B9D330","#69BCF3","#79d9f3","#fa5f94","#acd180","#fab4cc","#ffae5b"];
		$("#nav span").each(function(i,o){
			$(o).css("background-color",colors[i]);
		});

		//鼠标移动导航效果
		$("#nav li").hover(
			//鼠标悬浮触发
			function(){
				$(this).children("span").animate({'top':-38},200);
				var index=$(this).index();
				$("audio").get(index).play();
			},
			//鼠标移开触发
			function(){
				$(this).children("span").animate({'top':0},200);
			}
		);
	});
  </script>

</body>
</html>

css3 相关基础

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>css3基础</title>
 </head>
 <body>
  

 1.css3 属性选择器：<br>
 <style>
	input[class]{/*有class属性的*/
		background-color:#cd5c5c;
	}

	input[class="first"]{/*class 属性是first的元素*/
		background-color:#cd5c5c;
	}
	
	[class="first"]{/*class等于first的元素*/
		background-color:#cd5c5c;
	}

	input[name^=first]{/*input 的name属性以first开头的元素*/
		background-color:#cd5c5c;
	}

	input[name$=name]{/*input 的name属性以name结尾的元素*/
	
	}

	input[name*=str]{ /*input的name属性包含str的元素*/
		
	}
 </style>
 <input type="text" name="firstname" value="tom" class="first"><br>
 <input type="text" name="middelname" value="tom"><br>
 <input type="text" name="lastname" value="tom"><br>
 <input type="text" name="firstcity" value="beijing" class="second"><br>

<pre>
 2.css3 伪类选择器：<br>
 css2的伪类有-> :hover,:link,:active, :visited

 css3新增伪类选择器:
 E:first-child  E的父元素的第一个子元素
 E:first-last   E的父元素的最后个子元素
  :root 类似html，是文档的跟元素。
 E:nth-child(index) E的父元素子元素根据索引获得
 E:nth-last-child(index)E的父元素子元素根据索引获得倒数第几个
 E:enabled 匹配可用的元素
 E:disabled 匹配不可用的元素
 E:checked 匹配选中的元素

 :before
 :after 


 内容块居中:
	父元素: display:table
	内容元素:display:table-cell

</pre>

3.css3 圆角效果
border-radius:20px; /*四个角的半径为20px*/


4.盒子阴影
box-shadow: 水平阴影 垂直阴影 羽化 阴影大小 颜色

 </body>
</html>



<style type="text/css">
        /*2D动画-移动*/
        /*1.居中*/
        .div6
        {
            width: 200px;
            height: 200px;
            text-align: center;
            vertical-align: middle;
            background-color: silver;
            position: absolute; /*绝对定位*/
            line-height: 38px;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); /*以自生为原点移动上下移动50%*/
        }
        
        /*2.旋转*/
        .div2:hover
        {
            /*transform-origin:top left;*/
            transform: rotate(25deg);
        }
        
        /*3.缩放*/
        .div3:hover
        {
            /*transform:scale(0.5);*/ /*x,y轴都缩放0.5倍*/ /*transform:sacleX(0.5);*/ /*x方向缩放0.5倍*/
            transform: sacle(2,3); /*x方向2倍 Y缩放3倍*/
        }
        /*4.斜切*/
        .div4:hover
        {
            transform: skewX(8deg); /*x方向缩放8度*/
        }
        
        /*案例(下拉效果)*/
        /*案例1开始*/
        /*
		.div5{
			width:300px;
			height:40px;
			border:#5c5c5c solid 1px;
			margin:100px auto;
			position:relative;
		}
		.div5:after{
			content:'';
			width:12px;
			height:12px;
			display:block;
			border-right:#000 solid 2px;
			border-bottom:#000 solid 2px;
			top:50%;
			right:10px;
			position:absolute;
			transform:translateY(-50%) rotate(45deg);
		}
		.div5:hover{
			border:solid #009 1px;
		}
		.div5:hover:after{
			border-right:#009 solid 2px;
			border-bottom:#009 solid 2px;
		}*/
        /*案例1结束*/
        
        
        /*过度动画*/
        /*1.*/
        .div6
        {
            border-radius: 20px;
            transition: width 0.5s ease 1s;
            /*盒子阴影*/
			/*阴影向右偏移、向下偏移、模糊半径、延展半径、颜色*/
            box-shadow: 2px 2px 2px 5px black;
        }
        
        .div6:hover
        {
            width: 600px;
        }
        
        /*案例1,头像翻转*/
        .img1
        {
            margin: 100px auto;
            border: solid 1px green;
            border-radius: 50%;
            transition: all 0.5s ease 0s;
        }
        .img1:hover
        {
            transform: rotate(720deg);
        }
        
        /*案例2,鼠标经过图片放大*/
        /*案例2开始*/
        .img2-div
        {
            width: 192px;
            height: 168px;
            border: solid 1px green;
        }
        .img2
        {
            transition: all 1s ease 0s;
            cursor: pointer;
        }
        .img2:hover
        {
            transform: sacle(1.25);
            -webkit-transform: scale(1.25);
            -moz-transform: scale(1.25);
            -o-transform: scale(1.25);
        }
        /*案例2结束*/
        
        
        /*3d 旋转案例*/
        /*开始*/
        .img3-div
        {
            width: 180px;
            height: 168px;
            border: solid 1px silver;
            perspective: 400px; /*透视效果，这个属性必须给父元素添加*/
        }
        .img3
        {
            tansform-origin: bottom; /*旋转方向*/
            transition: all 0.5s; /*0.5秒内执行*/
        }
        .img3:hover
        {
            transform: rotateX(60deg); /*旋转60度*/
        }
        /*结束*/
        
        /*打开盒子案例（X轴旋转）*/
        /*开始*/
        #content
        {
            width: 192px;
            height: 168px;
            position: relative;
        }
        #face2
        {
            transform-origin: bottom;
            transition: all 2s ease 0s;
        }
        #face1, #face2
        {
            width: 192px;
            height: 168px;
            background: url(face.jpg) no-repeat;
            position: absolute;
            border: solid 1px green;
            border-radius: 50%;
        }
        
        #content:hover #face2
        {
            transform: rotateX(180deg);
        }
        /*结束*/
        
        
        /*百度钱包案例（Y轴旋转）*/
        
        body
        {
            background:#FF664D;
            }
        /*开始*/
        #content1
        {
            width: 300px;
            height: 660px;
            margin: 100px auto;
            overflow:hidden;
            position:relative;
        }
        
        #face3,#face4
        {
            width: 330px;
            height: 330px;
            background: url(image/face.png) no-repeat left bottom;
            position:absolute;
            left:0px;
            top:0px;
            transition:all 0.5s ease 0s;
            backface-visibility:hidden;
        }
      
      
        #face4 
        {
            z-indx:1;
            background-position:-300px bottom;
         }
        #face4
        {
            background-position: -330px bttom; /*spirits 技术*/
            transform:rotateY(-180deg);
        }
        
        #content1:hover #face3 
        {
            transform:rotateY(-180deg);
        }
        #content1:hover #face4
        {
            transform:rotateY(0deg);
        }

        /*结束*/
    </style>

旋转菜单


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        *
        {
            margin: 0px;
            padding: 0px;
        }
        li
        {
            list-style: none;
        }
        body
        {
            background-color: #ccc;
            font: 16px;
        }
        a
        {
            color: #888;
            text-decoration: none;
        }
        nav
        {
            width: 80%;
            height: 50px;
            margin: 100px auto;
            background: -webkit-linear-gradient(top,#292929,#252525); /*背景渐变*/
            background: -moz-linear-gradient(top,#292929,#252525);
            background: -o-linear-gradient(top,#292929,#252525);
            border-top: 2px solid #222;
            border-bottom: 2px solid #1b1b1b;
            min-width: 500px;
        }
        nav > ul
        {
            display: box;
            display: -webkit-box;
            display: -moz-box;
            display: -o-box;
        }
        nav > ul > li
        {
            box-flex: 1.0;
            -webkit-box-flex: 1.0;
            -moz-box-flex: 1.0;
            -o-box-flex: 1.0;
            text-align: center;
            height: 100%;
            line-height: 50px;
			position:relative;

        }
        
        nav li:hover
        {
            background:-webkit-linear-gradient(top,#1c1c1c,#1b1b1b);
            }

		.subnav{
			width:100%;
			position:absolute;
			top:50px;
			left:0;
			-webkit-perspective:400px;/*透视效果*/
			max-height:0px;/*防止菜单外出现下拉显示*/
		}

		.subnav li{
			background: -webkit-linear-gradient(top,#292929,#252525);
			opacity:0;
			transform:rotateY(90deg);
			transition:opacity 0.4s,transform 0.5s;
		}

		.subnav li:nth-child(1){
			-webkit-transition-delay:250ms;
		}
		.subnav li:nth-child(2){
			-webkit-transition-delay:200ms;
		}
		.subnav li:nth-child(3){
			-webkit-transition-delay:150ms;
		}
		.subnav li:nth-child(4){
			-webkit-transition-delay:100ms;
		}
		.subnav li:nth-child(5){
			-webkit-transition-delay:50ms;
		}
		.subnav li:nth-child(5){
			-webkit-transition-delay:0ms;
		}

        nav>ul>li:hover .subnav li{
			opacity:1;
			transform:rotateY(0deg);
		}
		
		nav>ul>li:hover .subnav li:nth-child(1){
			-webkit-transition-delay:0ms;
		}
		nav>ul>li:hover .subnav li:nth-child(2){
			-webkit-transition-delay:50ms;
		}
		nav>ul>li:hover .subnav li:nth-child(3){
			-webkit-transition-delay:100ms;
		}
		nav>ul>li:hover .subnav li:nth-child(4){
			-webkit-transition-delay:150ms;
		}
		nav>ul>li:hover .subnav li:nth-child(5){
			-webkit-transition-delay:200ms;
		}
		nav>ul>li:hover .subnav li:nth-child(6){
			-webkit-transition-delay:250ms;
		}
		
		/*雪花效果-begin*/
		.snow div{
			width:8px;
			height:8px;
			background-color:#fff;
			margin:100px;
			margin-left:300px;
			border-radius:50%;
			transform-origin:-60px 0;/*设置div中心点，使其运行时按弧线运动*/
			animation:donghua 5s linear infinite;/*css3 动画 linear:匀速，infinit:循环*/
			z-index:-1;
		}

		@keyframes donghua{
			0%{
				transform:translate3d(0,0,0) rotate(0deg);
			}
			100%{
				transform:translate3d(0,400px,0) rotate(360deg);
			}
		}

		.snow{
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:150px;
			overflow:hidden;
		}
		/*雪花效果-end*/

        header
        {
            width: 80%;
            height: 300px;
            display: -webkit-box;
            -webkit-box-orient:vertical;/*排列方式竖排:vertical(不能给box height) 横向:horizontal */
        }
        section
        {
            -webkit-box-flex: 1;
            background: pink;
        }
        section:first-child
        {
            background-color: Blue;
        }
        section:last-child
        {
             background-color: green;
        }
        section:nth-child(2)
        {
            -webkit-box-flex:2;
            }
    </style>
</head>
<body>

    <nav>
	<div class="snow">
		<div></div>
	</div>
	
        <ul>
        <li><a href="#">nav1</a>
            <ul class="subnav">
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
            </ul>
        </li>
        <li><a href="#">nav1</a>
			 <ul class="subnav">
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
            </ul>
		</li>
        <li><a href="#">nav1</a>
			 <ul class="subnav">
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
            </ul>
		</li>
        <li><a href="#">nav1</a>
			 <ul class="subnav">
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
                <li><a href="#">nav11</a></li>
            </ul>
		</li>
        <li><a href="#">nav1</a></li>
        <li><a href="#">nav1</a></li>
        <li><a href="#">nav1</a></li>
        </ul>
    </nav>

	<!--
    <header>
        <section></section>
        <section></section>
        <section></section>
    </header>
	-->
</body>
</html>




wateryi
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《HTML5+CSS3网站设计基础教程》 PPT
01-01
《HTML5+CSS3网站设计基础教程》 PPT
HTML5+CSS3 Web前端设计基础教程-PPT.rar
06-22
HTML5+CSS3 Web前端设计基础教程-PPT.rar，需要下载的从速！
HTML5+CSS3网站设计基础教程_动手实践源代码.zip
05-18
HTML5+CSS网页设计基础教程中的动手实践，来自传智播客那本书里面动手操作资料和源代码教程，可以更好的锻炼html+ccs操作能力。
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
HTML5+CSS3网站设计基础教程_动手实践源代码 chapter01 到 chapter10
HTML5 + CSS3
坏蛋阿土的博客
10-29 8482
HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。 标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏
HTML5+CSS3基础
林洋洋博客
07-01 787
专业介绍：移动前端；WEB前端。
HTML5+CSS、CSS3基础知识点总结
m0_51981718的博客
11-05 1万+
一、选择器 选择器分为基础选择器和复合选择器两大类。 基础选择器由单个选择器组成 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器（*） 标签选择器 优点 标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。 缺点 不能设置差异化样式，只能选择全部当前标签。 id 选择器与类选择器的区别 类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 1893
，HTML5和CSS3核心知识
HTML5+CSS3+JavaScript从入门到精通【文末送书】
最新发布
一键难忘的博客
05-23 7282
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML5+CSS3网站设计基础教程 源代码.rar
05-15
HTML5+CSS网页设计基础教程，传智播客书本中的源代码和练习教程，掌握web开发和设计过程，提高掌握综合能力。
H5+CSS3视频教程
07-18
H5+CSS3视频教程，仅供参考学习，有需要的可以下载，本人有全栈开发工程师各种技术视频教程及本档，有需要的可以留言或到本人账号下载
Web前端 HTML5 + CSS3 基础教程
10-20
Web前端 HTML5 + CSS3 基础教程
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份极其宝贵的资源。 HTML5是超文本标记语言的第五个版本，它在HTML4的基础上做了大量改进和扩展，以适应...
HTML5+CSS3入门基础知识
12-29
HTML5+CSS3入门基础知识 HTML5 是下一代的 HTML 标准，旨在提高网页的可读性、可访问性和可维护性。CSS3 是最新的样式表语言标准，旨在提高网页的视觉效果和用户体验。本节课程将介绍 HTML5 和 CSS3 的基础知识，...
HTML5+CSS3学习总结(完结)
热门推荐
是日前端
06-14 3万+
一、HTML5的语义化 二、CSS3动画 三、CSS3阴影 四、CSS3过渡(非常重要) 五、弹性布局 六、栅格布局 七、渐变 八、媒体查询
HTML5+CSS3基础响应式页面布局
liuyingv8的博客
01-08 2万+
随着互联网时代的发展，我们对网页布局有了新的要求，大气，美观，能够在不同的设备上呈现令人焕然一新的效果。此时，一个全新的概念—响应式布局应运而生。它的诞生为我们的移动端布局带来了很大的便利。因此学习响应式页面布局势在必行！ 一、响应式页面布局的概念 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个
Web前端零基础入门HTML5+CSS3基础教程——应用VsCode
m0_51277726的博客
07-22 2649
VsCode界面介绍 下图是VsCoda的应用界面 简要介绍以下几个功能 资源管理器 搜索引擎 源代码管理拓展 安装中文包（看你自身的情况） 打开拓展，搜索Chinese 选择你需要的安装（我这里是已经安装好了） 安装Live Server 它可以仿真环境进行编译 打开实时保存 在设置中找到以下选项，选择afterDelay， 则你就可以进行实时保存，防止文件丢失。 建立文件夹保存你的前端实践文件 当你要实践你的代码时，用VsCod...
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
HTML5+CSS3基础知识大全
HTML5+CSS3基础知识点 **HTML5基础知识点** 1. **HTML5简介**：HTML5是最新的HTML标准，提供了更多的功能和改进，提高了网页的可读性和可访问性。 2. **XHTML基础**：XHTML是HTML的XML版本，提供了更好的结构和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值