CSSSprites在Web开发中的应用.pdfVIP

CSS 张 军 (山东体育学院基础理论系，山东济南250063) 摘 要：HrrIP连接数对网站的加裁性能有至关重要的影技巧。CSS Sprites最适合用来做的，比如：清单导航的CSS鼠标 响。本K将CSS 翻转效果、大量小图标集中的应用。 Sprites技术应用-t-BS系统的制作之中，将普通 制作方式下的大量图片，合并成一个大图片，减少了用户发出 3．实现过程 的HTI’P连接的数量，大大提升了网站性能。 所有的设计第一步就是构思，构思好了，一般来说还需要 关键词：CSS DIVWeb 用Ps或FW等工具将需要制作的界面布局简单的构画出来．效 Sprigs 果如图所示。 1．引言 进入二十一世纪后。Web设计向着精致、巧妙的方向发 展。设计师们开始考虑使用非JS的方式制作鼠标滑过、悬停菜 单的效果．这时CSS Shea提出了 Sprite应运而生。2004年，Dave 一种使用CSS控制组合图片的方案，将许过小的图片组合在一 起，使用CSS定义背景属性，来控制图片的显示位置和方式。当 页面加载时，不是加载每个单独图片，而是一次加载整个组合 图片。这是一个了不起的改进。它大大减少了HTYP请求的次 数，减轻服务器乐力。同时缩短了悬停加载图片所需要的时间 延迟，使效果更流畅，不会停顿。 2．CSS Sprites技术概述 CSS Sprites技术在国外并不是什么新技术，只不过近几年 国内开始流行这个词．大家也开始越来越关注CSSSprites技 术。通常我们把CSS Spritesllq做CSS图像拼合技术。 CSSSprites可以用枉很多场合．大型网站可以将许多单独 图1效果图片 的图片，以有机的方式组合起来．从而使其便于维护和更新。 下面根据效果图来规划一下贞面的布局，仔细分析一下， 效果图大致分为以下三个部分： 但同时CSSSprite大多使用于较固定的像素定位中，它的弹性 较差，受到定位等因素的制约。所以，我们需要在可维护性和 11顶部部分．其中又包括了LOGO、MENU和Banner 降低负载之间权衡利弊，选择最适合的方式。 2)内容部分。包含界面的主要部分 31底部部分。包括联系方式和版权信息 在具体的实现过程中．background—position属性是非常重 要的属性。根据CSS规范，该属性包含了两个变量：水平位置 根据以卜分析，画了一个实际的页面布局图。 (horizontal)和垂直位置(vertical)。使用这个属性，可以定义块级 元素的背景图像位置，可以使用％(百分比)或PX像素为单位 来定义图像开始的位置。也町以使用Top、Center、Bottom、Left、 Right等关键字。 在需要用到图片的时候，是通过CSS属性background—im一 醒e组合background—repeat，background—position等来实现。通过 调整background—position的数值，背景图片就能以不同的面貌 出现在你服前。其实图片整体面貌没有变，由于图片位置的改 变，你只是看到该看到的而已。 CSS Sprites．利用CSSbackground—position进行背景绝对定 位，减少H7兀P请求。加速网贞显示，解决图片载入闪动问题的 图2布局图 课程上机，以及其他专业课的上机任务．需安装的软件资源众 四、结语 多。通过什．么方式或者根据什么来规划多种软件资源在机房