视口就是浏览器显示页面内容的屏幕区域
<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">标准的 viewport 设置
传统的 JS 只有 对象 的概念，没有class类的概念，因为 JS 是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象
但 ES6 引入了 class 类这个概念，通过 class 关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言
class Person{ // 定义一个名为Person的类
// 构造函数，用来接受参数
constructor(x,y){
this.x = x; // this代表的是实例对象
this.y = y;
}
todoSome(){ // 这是个类的方法，不需要加function，有多个方法也不用逗号隔开
alert(this.x + “的年龄是” +this.y+”岁”);
}
}
在2D平面产生近大远小视觉立体，但是只是效果二维的
透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小
perspective 可设置透视 （译为视距）
// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近
perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。
因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d
步骤1 @keyframes 定义动画样式 和 名称
// 顺序可用from {} to {} 或 百分比 0%{} 100%{}
@keyframes move {
/* 初始位置 */
0% {
transform: translateX(0px);
}
/* 基于初始位置向右移动500px */
100% {
transform: translateX(500px);
}
}
步骤2 animation-name 引入动画样式
/* 引入该动画:动画名称 */ animation-name: move;
步骤3 animation-duration 设置动画播放时间
/* 持续时间 5s */ animation-duration: 5s;继续阅读
定义2D转换中的移动，沿着 X 和 Y 轴移动元素；transform 的位移不会影响其他元素的位置
// transform 中的 translate 百分比单位长宽 是对于自身元素单位长宽；
// transform 对行内标签没有效果
该CSS样式常搭配 :hover 与 transition 一起使用
transform: none|transform-functions; //不进行转换 或 设置转换的方式函数
继续阅读可以采用 溢出隐藏 + 文字溢出隐藏 方式实现
/* (属性是用来设置如何处理元素中的 空白 (en-US)。)让文本一行显示 */ white-space: nowrap; /* 溢出内容隐藏 */ overflow: hidden; /* 溢出文字用省略号替代 */ text-overflow: ellipsis;继续阅读
| 值 | 属性 | 描述 |
|---|---|---|
| transition-property | all,height,width… | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 0s+ (单位s) | 规定完成过渡效果需要多少秒或毫秒。 |
| transition-timing-function | linear,ease,ease-in,ease-out,ease-in-out | 规定速度效果的速度曲线。 |
| transition-delay | 0s+ (单位s) | 定义过渡效果何时开始。 |
原理：利用JS的 document.getElementsByClassName() 获取类对应的标签对象。并用Dom对象属性中的 onmouseover 捕获鼠标划过状态时 执行 替换CSS样式 方法，并让其他标签元素隐藏，实现界面交互效果
::栏目A呈现的内容::
我是SMM,其实不瞒你说。我已经继承了百万遗产
::栏目B呈现的内容::
我是Aipo,一个喜欢画画的中二少女
::栏目C呈现的内容::
我是叫夜夜,是群里的一个姬器人…
<form> 标签定义及用法 在html中, <form> 标签是使用来创建供用户输入的 html表单,在网页中很常见,比如:注册和登录页面就是用表单实现的。
form的常用属性分别有<form action=”提交地址” method=”提交方式”>表单内容</form>
<form> 标签中通常会有很多子元素，用来定义各种交互控件（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea> 等标签
继续阅读