美文网首页
任务9-3CSS雪碧图

任务9-3CSS雪碧图

作者: mint9602 | 来源:发表于2017-02-08 18:31 被阅读17次

代码题

  1. 使用CSS Sprite 把如下6张图标图片合并成一张图片,做出如下效果, 当 hover 时背景变色








  2. 使用字体图标(如 iconfont, 查找->加入购物车->下载 demoCSS雪碧图合成 或者fontello)实现上例效果
    参考这位同学的文章CSS雪碧图现学现做
  3. 使用css border实现如下三角形
Paste_Image.png

推荐资源

工具-图片在线合并
工具-图片在线压缩
工具-caniuse 在线查兼容

相关文章

  • 任务9-3CSS雪碧图

    代码题 使用CSS Sprite 把如下6张图标图片合并成一张图片,做出如下效果, 当 hover 时背景变色 使...

  • IconFont

    iconfont 听群里大佬说,雪碧图现在已经不流行用了……替代雪碧图的方案是iconfont。今天的任务就是来研...

  • css-Sprite (雪碧图)

    雪碧图的使用场景: 不推荐使用雪碧图的地方: css Sprite(雪碧图)的实现原理: 雪碧图的实现方式: 作者...

  • CSS 雪碧图

    Question: 1、什么是雪碧图?2、为什么使用雪碧图?3、什么情况下适合使用雪碧图?4、雪碧图怎么使用?5、...

  • JS逆向:基于雪碧图的反爬策略与破解

    1. 雪碧图 1.1. 雪碧图 雪碧图(sprite)也叫CSS精灵, 是一CSS图像合成技术; 该方法是将小图标...

  • 什么叫 “雪碧图”?

    大家好,我是前端西瓜哥。今天来随意聊聊雪碧图。 雪碧图是什么? 雪碧图,英文原名叫 CSS sprites。 sp...

  • 亚马逊-雪碧图

    雪碧图

  • 任务9- CSS常见技巧

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 简介CSS Sprites(雪碧图|精灵图)是一种...

  • 前端—雪碧图

    使用雪碧图的优点有以下几点: 雪碧图的制作与使用方法:

  • 饥人谷-任务9-2

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 css雪碧图又叫css精灵或css sprite,...

网友评论

      本文标题:任务9-3CSS雪碧图

      本文链接:https://www.haomeiwen.com/subject/yklbittx.html