为了账号安全,请及时绑定邮箱和手机立即绑定

CSS Sprite雪碧图应用

学习人数
难度级别 中级
课程时长 1小时 0分
综合评分 9.7
131人评价 查看评价
9.9 内容实用
9.8 简洁易懂
9.5 逻辑清晰

简介:为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标、登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图。本课程分析了CSS Sprite雪碧图的实现原理,详细讲解制作方法,实现完整效果,让你快速掌握CSS Sprite雪碧图技术。

第1章 CSS Sprite雪碧图介绍及实现原理
介绍什么是雪碧图、雪碧图的使用场合、分析雪碧图的实现原理。

第2章 CSS Sprite雪碧图实现方式
介绍使用PS手动拼图和使用sprite工具自动生成雪碧图的方法

第3章 CSS Sprite雪碧图的应用
通过简单的导航实例,完成静态页面,讲解如何设置background-position属性来使用css sprite雪碧图

第4章 编程挑战
今天我们学习了雪碧图的实现原理,实现方式以及应用,让我们来一起挑战下吧!

讲师提示

远人 Web前端工程师
课程须知
您至少具备HTML/CSS基础知识。
老师告诉你能学到什么?
1.学会CSS Sprite雪碧图制作方法。2.学会CSS Sprite雪碧图的使用方法。
意见反馈 常见问题 APP下载
官方微信