移动web

第一天

字体图标

引入字体图标: link(领克)

<link rel="stylesheet" href="./fonts/iconfont.css">

使用类名引入字体图标(重点)

如果是一个标签来使用字体文件，可以采取2个类名的形式。（开发最常用）

<span class="iconfont icon-daohangdizhi"></span>

第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。不是普通的文字。
第二个类名 icon-daohangdizhi，告诉盒子到底使用哪个小图标。

在类名里加 iconfont 在空格加图标类名列入下列的icon-daohangdizhi

(字体图标下载网站:阿里巴巴矢量图标库下载地址:www.iconfont.cn/)推荐

小结

字体图标是前端工程师必须具备的知识点。开发中，字体图标上传，选择，都是网页美工给我们准备好了。

我们重点是下载和使用。

字体图标使用可以整体分为两大步骤：

引用线上地址即可。

  <link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">

调用。
- 开发中最常用的是使用类名来调用，所以重点记住这个就可以了。

<span class="iconfont icon-daohangdizhi"></span>

扩展font字体图标

font字体图标:减少服务器发送次数，减轻服务器的压力，提高页面加载速度

推荐4个常用的字体图标网站:

IcoMoon

icomoon.io/app/#/selec…

这个网站相当强大，还可以编辑，导出格式也比较丰富。这儿有一个教程可以看一下。如何灵活利用免费开源图标字体-IcoMoon篇

阿里巴巴的矢量图库IconFont.cn

www.iconfont.cn/

国内的原创矢量图库网站貌似确实不多，阿里巴巴的这个质量也比较高，主要摘录的是它自家的一些图标，不过大部分的时候也够用了。

fontello

fontello.com/

这个图标也比较全，并且是也是全开源的，下载也非常方便。

Font-Awesome

fortawesome.github.io/Font-Awesom…

比较老牌的字体图标网站了，图标多而全，且整体风格统一,下载方法比较复杂,服务器在国外

变形transform(2D:平面)

变形可以改变盒子在平面内的形态（位移、旋转、缩放等等）

transform可以让盒子沿着x轴或者y轴来移动

语法:

transform(穿丝佛木)

translase(穿死类次)

transform:translase(x,y);
transform:translaseX(x);
transform:translaseY(y);

transform位移不会影响其他盒子. 不脱标

位移经常应用场景:

盒子上下左右移动不影响其他盒子
盒子水平和垂直居中,写法简单
写轮播图的动画效果(列入淘宝中间大图的切换)

注意：

移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度

 transform: translateX(100%);

旋转rotate

旋转可以让盒子旋转角度

rotate(柔特次)

语法：

transform: rotate(45deg);    一定写单位   1turn=一圈

如果是正度数，则是顺时针旋转

如果是负度数，则是逆时针旋转

设置中心点 transform-origin

/* 设置旋转的中心点位置 */

transform-origin:right bottom

多形态变形小技巧

如果需要移动，也需要旋转，则一定先写移动，后写旋转, css属性书写顺序影响代码执行。
```
 transform: translate(-50%, -50%) rotate(360deg);
```
注意，多个值之前用空格隔开。

缩放 sacle

scale(死给哦)

语法:

transform:scale(1.2)

它比这宽度和高度最大的优势：他是用中心点来进行缩放的，同样他不会影响其他的盒子。

例如:页面中突然放大的图标,放大后缩小就是用到了缩放.

倾斜skew

skew(死给U)

   /* skew(第一个值X轴倾斜,第二个值Y轴倾斜); */
   transform: skew(-45deg, 0);

单词

单词	说明	实例
link(领克)	引入
transform(穿丝佛木)	变形、转换	translase(穿死类次) transform:translase(x,y); transform:translaseX(x); transform:translaseY(y);
rotate(柔特次)	旋转	transform: rotate(45deg); 一定写单位 1turn=一圈
scale(死给哦)	缩放	transform:scale(1.2)(缩放1.2倍)
skew(死给U)	倾斜	transform: skew(-45deg, 0); /* skew(第一个值X轴倾斜,第二个值Y轴倾斜); */

移动web(第一天)