中心主题

iconfont-字体图标

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

阿里巴巴矢量图标库

• unicode编码引入

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

• font—class引入

  • 引入方式很直观，推荐

  • 引入步骤

    • 1.引入字体图标层叠样式表 如：
    • 2.页面body标签里用i标签书写，添加字体图标的公共类名 如
    • 3.用浏览器打开本地下载好的demo_index.html文件，切换font class选项卡，挑选相应图标，复制图标类名，到i标签公共类名iconfont后面空格粘贴该图标类名 如：

• symbol引入

  • 支持多色图标
  • 兼容性差，如ie9+以前版本不支持多色图标引入

• 在线引入

  • 1.在图库网站里挑选好图标，点击加入购物车，进入购物车页面，选择添加至项目，如果没有项目，新建一个即可
  • 2.在我的项目页面点击font class选项卡，再点击查看在线链接 如：//at.alicdn.com/t/font_3078814_gfr27y8qe3e.css
  • 3.复制链接，回到开发的HTML文件，在link标签粘贴该链接，注意：在该链接前面加上http：或https：如：

其他字体图标库

• icomoon
• fontawesome 如：www.fontawesome.com.cn/

transform-平面转换

translate-平移

• translate(x,y)

• translateX()即translate(x)

  • 水平（左右）方向移动，正值向右移动，负值向左移动

• translateY()

  • 竖直（上下）方向移动，正值向下移动，负值向上移动

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

rotate-旋转

• rotate(deg)

  • 数值单位是deg，正值顺时针旋转，负值逆时针旋转

scale-缩放

• scale()

  • 数值默认为1，0-1缩小，大于1放大

skew-斜切

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

注意：行内元素添加转换无效

transform-origin平面转换原点

更改转换原点

transform-origin：水平 垂直

默认是transform-origin：center center，只书写一个值，另外一个默认是center

原点方位名词

• left，right，top，bottom，center

transform-origin：0 0；与transform-origin：left top；原点是一样

背景渐变

表现形式是背景颜色，本质是背景图片

background-image：linear-gradient（渐变方位，渐变颜色，渐变颜色）渐变颜色可以有多个，多个渐变颜色需要用逗号隔开

渐变方位

• to right

  • 从左向右渐变

• to left

  • 从右向左渐变

• to bottom

  • 默认，从上向下渐变

• to top

  • 从下向上渐变

• to bottom right

  • 从左上角向右下角

• to left top

  • 从右上角向左上角渐变

• to right top

  • 从左下角向右上角渐变

• to left bottom

  • 从右上角向左下角渐变

渐变方位名词

• left，right，top，bottom，center

属性选择器[]

[属性名 如：type，id，class等]

[属性名=“属性值内容”] 如：[type="text"]

[属性名^="部分属性值内容"]如：[type^="te"]

• 选择从..开始

[属性名$="部分属性值内容"]如：[type="xt"]

• 选择从..结束

[属性名*="部分属性值内容"][type="e"]

• 选择属性值中有部分属性值内容