网站导航:首页|中学语文|中学数学|中学英语|中学物理|中学化学|中学生物|中学政治|中学历史 |中学地理|网络杂谈|保健生活|网站系统|资料库
LOADING...
» 您尚未 [登录 - 注册] ┆ 风格 ┆ 搜索 ┆ 帮助 ┆ 
>易学网-中考高考指南 -> 网络天空 -> 网站系统 -> 使用CSS Sprite的时候的一些最佳实践。
资源发布 投票 回复评价 |今年最火爆的网购精品 您是本帖的第 1998411 个阅读者
 贴子主题:使用CSS Sprite的时候的一些最佳实践。
资源发表于 2012-9-15 18:20:49 资料 留言 编辑 引用 评帖 < 收藏 举报 1F >

使用CSS Sprite的时候的一些最佳实践。

不要等到你完成切片之后才开始sprite.

如果你边切图边写CSS,然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中,你就不得不完全重写你的CSS,你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合,就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如,如果我们希望一个图片出现在一个元素的左侧:

将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话,当你通过CSS移动背景图片的位置的时候,基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候,只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的,但是问题是,当你在宽度上或高度上扩展相关sprite图片的时候,原先设置的位置可能是错的,因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样,那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢?因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,以至于其它图片不会意外出现。

例子:

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片,你可以看到这三个数字图片是如何错开排列的,这样如果内容增多,其它图片就不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计,那么你将会有一大堆的图片来整合进到sprite里面,这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。ppsw.cn上使用的Sprite图片有1,000px×2,000 px那么大,但是图片的大小仅仅16.7kb!





------------------------------------------------------------------------
易学网-中考高考指南欢迎您!



 

淘宝热卖女装品牌
广告招商
Q管理员:519865538
Q业务员:2780300168

资源发表于 2012-9-15 18:28:25 资料 留言 编辑 引用 评帖 × < 2F >







------------------------------------------------------------------------
易学网-中考高考指南欢迎您!



 

淘宝热卖女装品牌
广告招商
Q管理员:519865538
Q业务员:2780300168

 每页10条,共1页,合计2条记录
9  1  :
转到  


Powered By:ex66.com 版权声明 手机站
易学网 品牌商务 皮皮服务业务咨询/网站客服: Q Q Q
1995-2015Server Time 蜀ICP备11008542号-1 客服在线:管理员QQ 赞助本站,我们将为你更好服务!