实训任务

CSS Sprite 及 渐变

• 选择个人项目中的某一个页面,使用 CSS Sprite 技术进行重构,替换掉原来分散的背景图片
• 使用css 线性变换 实现渐变的背景

icon font

在个人项目中

• 选择一个Icon字体库(如fontawesome),替换掉原来的背景图片或装饰类图片
• 使用字体库定制工具,定制属于自己的图标字体

字体库定制参考

• https://www.jianshu.com/p/ace4e35cf54b
• https://segmentfault.com/a/1190000008374352
• http://www.uisdc.com/4-icon-font-production-method

字体库定制工具

• 阿里工具 http://www.iconfont.cn/
  • 使用帮助 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=about
  • 定制帮助 https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
  • 项目与图标库的区别 https://mp.weixin.qq.com/s/1ELDjzcaUsehze5jh3UmGg?spm=a313x.7781069.1998910419.29
• 国外工具 http://fontello.com/
• 本地生成工具 https://github.com/youzan/iconfount