字体图标
下载字体图标（https://www.iconfont.cn/）
步骤：
1.百度搜索iconfont
2.在iconfont的素材库、或者搜索栏去搜索想添加的字体图标
3.把想要的字体图标添加到购物车
4.选择添加至项目（没有项目的要新建项目）
5.下载至本地，解压的文件放在需要使用的文件夹的根目录
使用方法
一：Unicode编码使用：
步骤：
1.引用iconfont.css；
2.利用空标签（大部分是i标签）去承接Unicode编码内容；
3.声明字体图标库 font-family: 'iconfont' ;
二.font-class 类名调用
步骤：
1.引用iconfont.css；
2.类名：
第一个类名是固定的：iconfont
第二个类名，打开demo.html文件，直接复制文字下方的类名即可
三：利用字体图标做出购物车模块
代码如下：
购物车
购物车
效果图：
四：字体图标搭配伪元素使用
步骤：
1.引入css文件
2.添加伪元素，content属性写：\字体编码，如：content: '\e602';
注意：字体编码在Unicode中获取（去掉前三字符跟后面分号），\的作用：编译
代码区域：
字体图标伪元素案例-购物车
购物车
效果图：
在线引入字体图标
链接获取途径：
1.打开iconfont首页，在头部导航的资源管理器中点击‘我的项目’
2.在项目中选择font-class，再点击旁边的获取在线链接，复制代码引入到vscode里面即可
注意：引入字体图标前link的href属性要添加完整的网页地址，在前面添加‘http:’才能生效
在线字体图标的优缺点：
优点---可以随时增加字体图标，只需更新字体图标的地址即可
缺点---在线字体图标打包的时候可能会丢失，一般工作中不用此方法。
上传svg文件
工作中如果遇到没有的字体图标，并且在iconfont网页中也搜索不到，此时需要自己上传svg文件，svg文件找UI小姐姐要
上传方法：
1.打开iconfont首页，点击右上角的上传图标
2.选择需要的svg文件上传，选择去颜色上传
3.上传完成后，点击批量操作，把需要的字体图标添加到购物车，下载使用即可
平面转换transform属性
①：translate位移
描述：网页看作一个平面，浏览器左上角为原点，X/Y轴分别向右，向下。
有X、Y轴，取值px，正值为X向右、Y向下。负值为X向左、Y向上
语法：
transform: translateX(100px);-------X轴向右移动100px
transform: translateX(-100px);-------X轴向左移动100px
transform: translateY(100px);-------X轴向下移动100px
transform: translateY(-100px);-------X轴向上移动100px
连写：
错误写法：
transform: translateX(100px);
transform: translateY(50px);
由于CSS的层叠性，上述写法是错误写法，最终只会显示Y轴向下移动50像素。
正确写法：
transform: translate(100px,50px)-------X轴向右移动100px，Y轴向下移动50px
注意：连写的第一个值代表X轴，第二个值代表Y轴，中间用英文逗号隔开。
transfrom的注意项：
1.transform属性对行内元素无效
2.添加了transform属性的盒子可以提高盒子层级，并保留原来位置，类似于相对定位的特点
3.translate只给一个值默认值为X轴移动
4.translate赋值为百分比的时候，参考的是盒子本身的大小进行位移
②：利用translate百分比实现盒子居中效果
代码：
绝对定位元素居中效果
因为translate赋值为百分比参考的是盒子本身大小进行位移，所以利用该特性来实现居中的话，居中效果不会受到父盒子宽高改变而受到影响。
用margin实现居中的缺点：因为margin取值都是具体像素，所以当父元素修改宽高时，居中效果会失效。
rotate旋转
顺时针旋转取正值，逆时针旋转取负值，单位deg
语法：
transform：rotate(360deg); 顺时针旋转360度
transform：rotate(-360deg); 逆时针旋转360度
利用：transform-origin属性来改变转换原点：
transform-origin的赋值：
1.取方位名词（left、right、top、center、bottom）用得最多
2.具体的像素单位（正负均可）
transform-origin: -100px -100px;
3.百分比（参考盒子自身尺寸）
transform-origin: 50% 100%;
多重转换效果：
需求：水平移动的过程中还旋转着
错误写法：
transform: translate(600px)
transform: rotate(720deg)
由于CSS的层叠性，只能实现旋转720度
正确写法：
transform: translate(600px) rotate(720deg);
注意：由于旋转会改变坐标轴的方，当平移与旋转一起使用的时候，要把平移放在旋转的前面
scale缩放
可以实现盒子的缩放，默认值为1，大于1表示放大，小于1表示缩小
语法：
transform: scale(1.2); ------表示放大为原来的1.2倍
transform: scale(0.8); ------表示缩小为原来的0.8倍
案例：和平精英-缩放
代码：
Document
【和平精英】“初火”音乐概念片：四圣觉醒......
效果图：
背景渐变：background-image: linear-gradient
语法：
background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1：
方位：默认的方位从上到下
1.方位名词：to right,to right bottom
2.角度deg：直接写度数即可，不用再加to
参数2：颜色1；
参数3：颜色2；.....
代码：
渐变背景
效果图：
产品展示案例
代码：
Document
智能体
打造行业智能体，共建全场景智慧
效果图：
华为综合案例
代码：
Document
效果图：