就业班移动web第一天
一.字体图标iconfont
字体图标：显示的是图片，本质是字体。
iconfont：下载图标库：www.iconfont.cn（注册登入，根据需求找到对应的图标加入购物，添加至创建好的项目，下载使用！可自行上传自己的素材）
iconfont的使用方法
1、Unicods使用方法：
1.在head里面通过link引入iconfont文件夹中的iconfont.css文件
2.通过标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来
3.在css里的标签声明字体图标库 font-family:iconfont;
2、class使用方法：
1.在head里面通过link引入iconfont文件夹中的iconfont.css文件
2.通过标签承接字体图标（ 标签第一个类名是固定的：iconfont，第二个类名：通过demo_index.html文件或者项目主页面，直接去复制文字下方的类名即可）
iconfont可以搭配伪元素进行添加
1.在head里面通过link引入iconfont文件夹中的iconfont.css文件
2.在双标签（before，after）进行添加，字体图标放在content里面，在content的容中去掉前面三个字符，替换成反斜杠/，注意：需要设置字体家族font-family:iconfont
二.平面转换
使用transform属性实现元素的位移、旋转、缩放等效果
1.transform: translatee(水平移动距离, 垂直移动距离）
a取值：（正负：X轴正向为右，Y轴正向为下） 单位：1.像素值 2.百分比（参照盒子的尺寸）
b技巧：1.translate()如果只给出一个值, 表示x轴方向移动距离,2单独设置某个方向的移动距离：translateX() & translateY()
ps：可以通过translate实现绝对定位居中的效果：利用子绝父相，给子盒子宽高设置50%，再将子盒子transform: translatee移动距离设为-50%，-50%，
2.transform: rotate 使元素实现旋转的效果
a取值：：取值正负均可，单位：deg（取值为正, 则顺时针旋转，取值为负, 则逆时针旋转）
3.transform-origin 改变转换原点
a.默认圆点是盒子中心点，2.transform-origin: 原点水平位置 原点垂直位置 ;
b.取值：1.方位名词（left、top、right、bottom、center）2.像素单位数值3.百分比（参照盒子自身尺寸计算）
4.transform复合属性 实现多形态转换
a.技巧：transform：translate（） rotate（）
注意连写多个属性用空格隔开
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
4.transform-scale 改变元素的尺寸
a.取值：transform: scale(x轴缩放倍数, y轴缩放倍数);
b.技巧：1.transform: scale(缩放倍数) 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放。
2..scale值大于1表示放大, scale值小于1表示缩小，值等于1表示默认形态
三.渐变背景
a.语法：background-image：linner-gradient（参数1，参数2，参数3......）；
b.参数取值：
参数1：方位-默认的方位从上到下
1.方位名词：例如：从左到右渐变 to right,从左上到右下渐变 to right bottom。
2.角度deg：直接写度数即可，不用再加to）
参数2 ：颜色
参数3：颜色
