下载到本地

想需要的图标加入购物车，然后添加至项目中，再选择下载至本地

先看效果图

代码阶段

由于这个canvas是我在vue项目里写的，所以为了照顾一下没学过vue的，就用了原生的js整理了一下，里面用到了一些es6的语法，包括class 模板字符串`` 等，代码里面都有注释。

css样式

1
2
3
4
5

div {
    width：100%;     /*必须是100%*/ 
    height:0;
    padding-top:100%  /*padding-bottom:100% 也行*/ 
}

这样会使元素的高度等于宽度，形成一个正方形。

一、定义

当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。

二、作用

减少或延迟请求数，缓解浏览器的压力，增强用户体验。

三、实现方式

scrollX、scrollY和scrollTop、scrollLeft比较

• 相同点：都可以获取到滚动条的位置，都是window对象下的。bom对象
• 不同点：scrollX、scrollY只读不写;scrollTop、scrollLeft：可读可写

判断浏览器类型用的方法是

navigator.userAgent //取得浏览器的userAgent字符串
例子

首先第一条很重要

元素添加hover伪类选择器时候一定要紧贴这hover，不能有空格，有空格的话表示给该元素的所有子元素设置里hover样式。