移动web第一天

字体图标

本质是字体，表现形式是图标

阿里巴巴矢量图标库

• unicode编码引入

  • 引入方式不是很直观，不推荐

• font class引入

  • 书写起来非常的直观

  • 步骤

    • 1. 引入字体图标的css文件iconfont.css
    • 2. 书写i标签，添加iconfont公共类名
    • 3. 打开示例demo_index.html, 切换font class选项卡，挑选图标，复制类名，再进行粘贴

• symbol引入

  • 支持多色图标
  • 缺点：兼容性很差 ie 9+

• 在线引入

  • 挑选图标之后，点击加入购物车，在购物车页面，我们要选择添加至项目，没有项目就创建一个项目进行添加。
  • 在我的项目中，点击font class选项卡，再点击查看在线链接
  • 复制链接，回到html文件中，书写link标签，粘贴链接即可，注意：在链接前面补上https:

其他几个字体图标库

• icomoon
• fontawesome

平面转换

transform

• 平移

  • translate(x, y)

  • translate(x)

    • translateX()

  • translateY()

  • 注意点：设置百分比单位参考自身去计算

• 缩放

  • scale(x, y)
  • 0-1缩小 大于1 放大
  • 没有单位 代表倍数

• 旋转

  • rotate(deg)
  • 正值 顺时针 负值 逆时针

• 斜切

  • skewX(deg)
  • skewY(deg)
  • 应用场景 擦亮效果

• 行内元素添加转换是无效的 先平移后旋转

transform-origin

• 更改转换原点

• transform-origin: 水平 垂直;

• 默认 transform-origin: center center;

• 如果只写一个值 另一个值默认为center

• 方位名词

  • left
  • top
  • center
  • right
  • bottom

• 具体像素

  • transform-origin: 0 0;
  • transform-origin: left top;

背景渐变

本质是背景图片

background-image: linear-gradient(方位,#0a0,#6cf)

方位

• to right

  • 从左到右

• to left top

  • 从右下到左上

• 0deg

  • 从下到上

• 90deg

  • 从左到右

• 45deg

  • 从左下到右上

属性选择器

语法 []

[type]

[type="text"]

[class^="text"]

• 类名中，以text开头的属性

[class$="text"]

• 类名中，以text结尾的属性

[class*="text"]

• 类名中，含有text的