CSS Sprites在Web开发中应用.docVIP

CSS Sprites在Web开发中的应用 　　摘 要: HTTP连接数对网站的加载性能有至关重要的影响。本文将CSS Sprites技术应用于BS系统的制作之中,将普通制作方式下的大量图片,合并成一个大图片,减少了用户发出的HTTP连接的数量,大大提升了网站性能。 　　关键词: CSS Sprites DIV Web 　　 　　1.引言 　　进入二十一世纪后,Web设计向着精致、巧妙的方向发展。设计师们开始考虑使用非JS的方式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。2004年,Dave Shea提出了一种使用CSS控制组合图片的方案,将许过小的图片组合在一起,使用CSS定义背景属性,来控制图片的显示位置和方式。当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。 　　2.CSS Sprites技术概述 　　CSS Sprites技术在国外并不是什么新技术,只不过近几年国内开始流行这个词,大家也开始越来越关注CSS Sprites技术。通常我们把CSS Sprites叫做CSS图像拼合技术。 　　CSS Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。但同时CSS Sprite大多使用于较固定的像素定位中,它的弹性较差,受到定位等因素的制约。所以,我们需要在可维护性和降低负载之间权衡利弊,选择最适合的方式。 　　在具体的实现过程中,background-position属性是非常重要的属性。根据CSS规范,该属性包含了两个变量:水平位置(horizontal)和垂直位置(vertical)。使用这个属性,可以定义块级元素的背景图像位置,可以使用%(百分比)或PX像素为单位来定义图像开始的位置,也可以使用Top、Center、Bottom、Left、Right等关键字。 　　在需要用到图片的时候,是通过CSS属性background-image组合background-repeat,background-position等来实现。通过调整background-position的数值,背景图片就能以不同的面貌出现在你眼前。其实图片整体面貌没有变,由于图片位置的改变,你只是看到该看到的而已。 　　CSS Sprites,利用CSS background-position进行背景绝对定位,减少HTTP请求,加速网页显示,解决图片载入闪动问题的技巧。CSS Sprites最适合用来做的,比如:清??导航的CSS鼠标翻转效果、大量小图标集中的应用。 　　3.实现过程 　　所有的设计第一步就是构思,构思好了,一般来说还需要用PS或FW等工具将需要制作的界面布局简单的构画出来,效果如图所示。 　　下面根据效果图来规划一下页面的布局,仔细分析一下,效果图大致分为以下三个部分: 　　1)顶部部分,其中又包括了LOGO、MENU和Banner 　　2)内容部分,包含界面的主要部分 　　3)底部部分,包括联系方式和版权信息 　　根据以上分析,画了一个实际的页面布局图。 　　至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。由于Head部分比其它部分相比略显复杂,接下来主要实现的是Head部分。 　　接下来我们首先新建一个空白的网页文件,在Head标签内导入CSS文件,另一个为CSS文件,内容如下: 　　body {font:12px Tahoma;margin:0px; 　　text- align:center;background:#FFF;} 　　a:link,a:visited,a:hover { 　　font-size:12px;text-decoration:none;} 　　#logo{BACKGROUND:url(Union_sprites.gif)} 　　#banner{BACKGROUND:url(topbanner.gif)} 　　#container{width:100%} 　　#Header,#Main,#Contact,#Footer{ 　　MARGIN:10px auto;WIDTH: 980px} 　　文件保存后,用浏览器打开,这时我们已经可以看到基础结构了,这个就是页面的框架了。写好了页面大致的DIV结构后,就可以开始细致地对每一个部分进行制作了。 　　接下来,我们开始制作Head部分,Head部分包括了LOGO、菜单和Banner,首先我们要做的就是对背景图片进行切片,CSS Sprites中需要精确