移动web第一天

字体图标（iconfont）

本地引入

登录阿里巴巴矢量图库（www.iconfont.cn/）将需要使用的图标加入购物车，在购物车中点击下载，放入项目所在的文件夹，在html中用link引入字体图标

在线引入

将需要使用的图标加入购物车，在购物车中点击添加至项目，选择你的项目文件夹，点击font class'，点击复制代码，用link引入刚才复制的代码（注意链接前要加https）

转换（transform）

位移translate

• transform: translate(x)
• transform: translateX(x)
• transform: translateY(y)
• transform: translate(x，y)
• transform: translate(50%)

旋转rotate

• transform: rotate(deg)顺时针
• transform: rotate(-deg)逆时针

缩放scale

• transform: scale(1.2)

转换原点transform-origin

• 转换原点的默认值为 center center
• 0. 设置方位名词 left right center top bottom
• 2. 如果只写一个值，另一个值默认为center
• 3. 具体像素

多重转换

• transform: translate(xpx) rotate(xdeg)

  • 顺序不同效果不一样

渐变（background-image）

渐变的本质是背景图片

background-image: linear-gradient(

方向, 颜色, 颜色 )

• 默认 从上到下
• 方位名词 to right 从左到右 to right top 从左下到右上
• 角度 0deg 从下到上

扩展知识

斜切skew

属性选择器

• [class^=""]以....开始
• [class$=""]以.....结束
• [class*=""]选中指定的内容

\