移动Web第一天

1.字体图标

1>字体图标：

展示的是图标，本质是字体。可自行更改颜色和字体大小！

以此实现使用字体图标技巧实现网页中简洁的图标效果

2>引入字体图标

国内推荐网址：Iconfont：www.iconfont.cn/ 阿里巴巴字体库 (常用)

国外：暂不推荐，学校网速可不配

3>使用方法

第一步，前往阿里图标库购物，看上哪个选哪个，毕竟不要钱，颜色单一建议单色图标库，花里胡哨建议其他，根据实际需求选取

点击更新代码，生成在线链接

这里只介绍实际开发常用的线上用法，上面就是准备工作啦！ 然后打开VS，就是敲代码的软件了，简称头发去世器~~

第一步，link引入生成的在线链接，记得在前面加上http: 不然不会生效的，比如： at.alicdn.com/t/font_3391… 至于之前的阿里注册什么的 小伙伴自行研究 拒绝伸手党 第二步，先来个我们最喜欢的 .box 盒子（天天玩盒子），给盒子加上类名 此处iconfont必须得有，然后就跑到阿里选择需要的图标，复制代码，粘贴到inconfont后面 也就是双类名 然后打开浏览器检验成果即可，当人加样式什么的都是可以的。 小结：当然阿里官网也明确写出了字体图标的具体使用办法，不理解的小伙伴自行查看

2.平面转换（transform）

1>元素位移

语法：transform: translate

(水平移动距离, 垂直移动距离);取值正负均可，X轴正向向右，Y轴正向向下，

translate()如果只给出一个值, 表示x轴方向移动距离

单独设置某个方向的移动距离：translateX() & translateY()

2>元素旋转

语法：transform: rotate(角度)

注：角度为单位，比如45deg，表示度数，正值为顺时针旋转，负值逆时针旋转。此外还可以transform: rotate（xturn）turn表示圈 1turn表示旋转1圈，以此类推。

3>渐变效果

语法：background-image：linear-gredient（颜色1，颜色2，....）

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

渐变颜色默认从上到下 也可以通过代买改变颜色渐变方向，可通过to 方向，颜色1，颜色2，...

今日总结

只是自己的一些小笔记，俗话说好记性不如烂笔头，多写写总没错，大家一起加油，把头发敲没，把头敲烂！