字体图标（解决精灵图的缺点）
1.轻量级
2.灵活性
3.兼容性（几乎支持所有的浏览器）
注意不能代替精灵技术，比如复杂的图片还是用精灵图做
- 下载
- icomoon（国外服务器）https://icomoon.io/
- iconfont阿里字体库
-
引入
把下载的fonts 放到项目根目录
通过css的方式引入
image.png
css 三角制作
当 div 盒子width,hight 都是0px 时，设置4条边的颜色即可（可以把其他三边设置透明）
image.png
css用户界面样式
所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验
-
更改用户的鼠标样式
2.表单轮廓
3.防止表单域拖拽
image.png
image.png
image.png
vertical-align属性（图片和文字垂直居中，和行内块或者行内元素搭配使用）
image.png
解决图片底侧空白缝隙
image.png
溢出的文字省略号显示
image.png
image.png
image.png
image.png
此处更推荐后台人员做这个效果，因为后台人员可以设置显示多少字，操作更简单
页面布局技巧
巧妙利用一个技术更好更快的布局：
1.margin负值的运用
image.png
image.png
image.png
image.png
相对定位会压住其他的盒子
2.文字围绕浮动元素
image.png
image.png
