摘要：
1.原理分析和效果图 先上效果图： 屏幕适配上使用rem适配，假设用户的手机屏幕最下宽度是375px，而谷歌浏览器最小的字体大小为12px，所以我以375px为标准尺寸进行rem适配，即375px的屏幕设置html标签字体大小为12px，随着屏幕宽度增大，1rem也随之增大 表盘使用的是圆角，使之展 阅读全文
摘要：
1.先说说css的坐标系： x轴的正方向就是水平向右的方向 y轴的正方向就是垂直向下的方向 z轴的正方向就是屏幕到用户的方向 2.位移 说明：位移是转换属性中的一个值，包含2d与3d 属性值 说明 translate(x,y) 2d位移 translateX(n) 2d位移，设置x轴方向的位移 tr 阅读全文
摘要：
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 渐变不是一个css属性，可以把它看成一个函数，通过传入参数（渐变方向和颜色）来返回一个视觉效果 一般用在background属性中，注意，不能用在background-color中 ###1.线型渐变 linea 阅读全文
摘要：
1.背景图大小(background-size) 这个属性设置单张背景图的大小，默认是原图的大小 当同时指定宽高时，会造成图片失真，如果要保持宽高比，可以使用 auto 字段让宽或者高自适应 值类型 示例 说明 像素 50px 50px - 百分比 50% 50% 这个比例是基本容器本身，而不是原图 阅读全文
摘要：
1.CSS过渡 含义：在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式将样式转变的过程展现出来，而这个过程 阅读全文
摘要：
1.首先，为了使元素可拖动，要先设置元素为可拖拽 方法：添加draggable属性，设置为 true 注意：链接和图像默认就支持拖拽，另外，如果一个元素中的文本被选中，那么这个元素和他的文本节点此时都支持被拖拽。 <body style="padding:30px;"> <div class="it 阅读全文
摘要：
1.网络状态监听 online事件：网络重新连通时触发 offline事件：网络断开时触发 <script> // 监听网络连接 window.addEventListener("online",function(){ console.log("网络连通了") }) // 监听网络断开 window 阅读全文
摘要：
###1.互联网上的音频 直到现在，仍然不存在一项旨在网页上播放音频的标准。 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。 ###2.插入音乐 <audio> 标签 目前， 阅读全文
摘要：
1.什么是自定义属性 特殊属性：例如id，class，checked这类属性有特殊的作用，设定后将影响元素渲染，同时点语法也能获取到这些属性值 自定义：自定义属性使用"data-"开头的属性，只存在标签中，无法通过点语法无法获取 <div data-animal-type="鱼类" data-pri 阅读全文
摘要：
1.类名操作 class类名以字符串的形式存储到标签和Dom元素的属性中，标签属性为class，Dom元素属性为className，两个属性是均支持读取和修改，修改其中的一个会同步至另一个属性 className属性：拿到Dom后，通过这个属性来读取和修改 <body> <div id="app"> 阅读全文