相对于传统的处理方式，本次修改将15个图片处理成2个图片，从性能上来讲大大减少了对web服务器的请求数，也就是说前端性能得到提升。
再次改进的处理
保留css sprite的处理，去掉占位图片，直接输出文字链接,再用css控制显示效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_yo1s.com</TITLE>
<style type="text/css">
<!--
/*general*/
ul,ol,dl,dt,dd,p,span {margin: 0;padding: 0;font: normal 12px Tahoma;}
.cls {clear: both;display: block;font: normal 0/0 Arial;}
img {border: 0;}
dl {width: 320px;margin:8px;}
dt {font:bold 14px/28px Tahoma;}
textarea {width:99%;height:90px;}
p {font:normal 14px/28px Tahoma;}
/*extral*/
.gsort {height:1%;background: #eee url() no-repeat center;padding:3px 0;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
.gsort li a {display:block;width:56px;height: 69px;font-size:0;text-indent:-500px;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>再次处理后的效果</dt><dd class="gsort"><ul>
<li><a href="">动作类</a></li>
<li><a href="">体育类</a></li>
<li><a href="">益智类</a></li>
<li><a href="">射击类</a></li>
<li><a href="">综合类</a></li>
<li><a href="">搞笑类</a></li>
<li><a href="">冒险类</a></li>
<li><a href="">棋牌类</a></li>
<li><a href="">策略类</a></li>
<li><a href="">敏捷类</a></li>
<li><a href="">装扮类</a></li>
<li><a href="">休闲类</a></li>
<li><a href="">儿童类</a></li>
<li><a href="">测试类</a></li>
<li><a href="">MTV类</a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
通过以上两次改进，相信您对CSS的sprite技术有了一定的认识。概括地讲，CSS的sprite处理是指将网页中背景、图标等小图片集中到一张大图片上，再用CSS（利用background）控制其在页面上的显示，这样有效可以减少对web服务器的请求数，也可以使DOM更加清晰简洁。
当然，对于整站应用css sprite需要更多的是耐心和细心
相关文章
精彩导读
热门资讯
关注我们
