0
点赞
收藏
分享

微信扫一扫

移动Web

字体图标

Ø 字体图标 展示的是图标 本质是字体。

Ø 处理简单的、颜色单一的图片

字体图标-Iconfont

下载字体包:

l 登录 (新浪微博) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地

使用字体图标 - Unicode编码:

l 引入样式表: iconfont.css

l 复制粘贴图标对应的Unicode编码

l 设置文字字体

使用字体图标 – 类名:

l 引入字体图标 样式表

 

l 调用图标对应的 类名,必须调用2个类名

l iconfont类:基本样式,包含字体的使用等

l icon-xxx:图标对应的类名

平面转换概念

目标:使用 transform 属性实现元素的 位移 旋转 缩放 等效果

l 平面转换

Ø 改变盒子在平面内的形态(位移、旋转、缩放)

Ø 2D转换

l 平面转换属性

Ø transform

目标:使用 translate 实现元素 位移 效果

l 语法

Ø transform: translate(水平移动距离, 垂直移动距离);

l 取值( 正负 均可)

Ø 像素单位数值

Ø 百分比(参照物为盒子自身尺寸)

注意:X轴正向为右,Y轴正向为下

l 技巧

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

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

​​​​​​​

举报

相关推荐

0 条评论