发表于： 2017-03-22 21:04:10
3 745
【今天完成的事情】
1.学习了如何制作并使用雪碧图
2.就做好了任务6的头部
【收获】
1.雪碧图
CSS Sprite使用优化：有效的减少http请求数量，加速内容显示
CSS Sprite 使用规则：
1、静态图片，不随用户信息的变化而变化（通常在网站上以常态的形式存在）
2、小图片，图片容积比较小
3、3K-5K容量，网站加载量比较大
（一些大图不建议使用Sprite图，用户加载量较大）
雪碧图实现原理：控制一个层可显示的区域范围大小，通过一个窗口进行背景图的滑动。（可以用chrome开发者工具滚轮来调试）
【遇到的问题】
1.右边的文字和外面的框之间有空隙
对span设置{display:inline-block;width:50%;}就成了
2.
雪碧图里的图标过大的问题——>
，设置了width：20px height:20px;——>只显示了一部分
——>设置了background-size后大小合适了，可是原来的坐标又全改动了....
【明天计划的事情】
1.学习如何用css模拟下拉框2.继续写任务6
返回列表
评论