中心主题

分支主题 1

字体图标

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

• 阿里巴巴矢量图标库

  • unicode编码引入

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

  • font class引入

    • 书写起来非常的直观

    • 步骤

      • 0. 引入字体图标的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"]
• [class$="text"]
• [class*="text"]

分支主题 2

分支主题 3

\