|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
目前我们的站就是div+CSS做的,美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.
网页制造poluoluo文章简介:阿里妈妈UED谈CSSSprites手艺.
CSSSprites简介
一般被意译为“CSS图象拼合”或“CSS贴图定位”。CSSSprites并非一门新手艺,今朝它已在网页开辟中开展得较为成熟,阿里巴巴各子公司的网页中各处都可发明csssprites的影子。但CSSSprites并非甚么清规戒律,但在良多情形下,它有着必定的上风,最主要的是它能够加重服务器的负载,进步网页加载速率。跟着Web计划向着精巧、奇妙的偏向开展,计划师们入手下手思索利用非Javascript的方式制造鼠标滑过、悬停菜单的效果,这时候CSSSprite应运而生。
说白了,CSSSprites实在就是把网页中一些背景图片整合到一张图片文件中,再使用CSS的“background-image”,“background-repeat”,“background-position”的组合举行背景定位,background-position能够用数字能准确的定位出背景图片的地位。
当页面加载时,不是加载每一个独自图片,而是一次加载全部组合图片。这是一个了不得的改善,它年夜年夜削减了HTTP哀求的次数,加重服务器压力,同时延长了悬停加载图片所必要的工夫提早,使效果更流利,不会停留。
CSSSprites使用
在这方面,淘宝网做的对照好,我就以淘宝网为例吧。
实例一:淘宝频道页面导航
最终效果:
点击缩小
sprites图:
网页制造poluoluo文章简介:阿里妈妈UED谈CSSSprites手艺.
实例二:淘宝首页
最终效果:
sprites图:
CSSSprites长处
CSSSprites为何俄然跑火,跟可以提拔网站功能有关。不言而喻,这是它的伟大长处之一。
- 使用CSSSprites能很好地削减了网页的http哀求,从而年夜年夜的进步了页面的功能,这是CSSSprites最年夜的长处,也是其被普遍传布和使用的次要缘故原由;
- 团体以为CSSSprites能削减图片的字节,我已经对照过量次3张图片兼并成1张图片的字节老是小于这3张图片的字节总和。
CSSSprites弱点
固然CSSSprites是云云的壮大,可是也存在一些不成无视的弱点。
- 在图片兼并的时分,你要把多张图片有序的公道的兼并成一张图片,还要留好只够的空间,避免板块内不会呈现不用要的背景,不然大概会呈现呈现搅扰图片的情形;这些还好,做疾苦的是在宽屏,高分辩率的屏幕下的自顺应页面,你的图片假如不敷宽,很简单呈现背景断裂;
- CSSSprites在开辟的时分对照贫苦,你要经由过程Photoshop或其他工具丈量盘算每个背景单位的准确地位,这是针线活,没甚么难度,可是很烦琐;不外网上已有妙手开辟出“CSSSprites款式天生工具”,人人能够实验一下。
- CSSSprites在保护的时分对照贫苦,sprites是一样平常双刃剑,假如页面背景有少量修改,一样平常就要改这张兼并的图片,无需改的中央最好不要动,如许制止修改更多的css,假如在本来的中央放不下,有只能(最好)往下加图片,如许图片的字节就增添了,由于每次的图片修改都得往这个图片删除或增加内容,显得略微烦琐,并且从头算图片的地位(特别是这类上千px的图)也是一件很是不爽的事变。固然,在功能的标语下,这些都是能够克制的。
- 因为图片的地位必要流动为某个相对数值,这就得到了诸如center之类的天真性。
CSSSprites总结
功能名列前茅。CSSSprites十分值得进修和使用,出格是页面有一堆ico(图标)。总之良多时分人人要衡量一下利害,在决意是否是使用CSSSprites。为坚持兼容性和保护性,sprites图片中的各个部分坚持必定的间隔是一种不错的做法。
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。 |
|