先看实例：一组常见的网站图片导航
传统的处理方式
直接在图片上加上目标链接，然后按要求排版
以下是HTML网页特效代码，点击运行按钮可查看效果：[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_</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;}
/*extral*/
.gsort {height:1%;background: #eee;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>传统方法处理的效果</dt><dd class="gsort"><ul>
<li><a href="http://www./list20.htm"><img alt="动作类" src="http://www./img2/a1.gif" /></a></li>
<li><a href="http://www./list12.htm"><img alt="体育类" src="http://www./img2/a2.gif" /></a></li>
<li><a href="http://www./list10.htm"><img alt="益智类" src="http://www./img2/a3.gif" /></a></li>
<li><a href="http://www./list13.htm"><img alt="射击类" src="http://www./img2/a4.gif" /></a></li>
<li><a href="http://www./list26.htm"><img alt="综合类" src="http://www./img2/a5.gif" /></a></li>
<li><a href="http://www./list19.htm"><img alt="搞笑类" src="http://www./img2/a6.gif" /></a></li>
<li><a href="http://www./list17.htm"><img alt="冒险类" src="http://www./img2/a7.gif" /></a></li>
<li><a href="http://www./list18.htm"><img alt="棋牌类" src="http://www./img2/a8.gif" /></a></li>
<li><a href="http://www./list24.htm"><img alt="策略类" src="http://www./img2/a9.gif" /></a></li>
<li><a href="http://www./list11.htm"><img alt="敏捷类" src="http://www./img2/a10.gif" /></a></li>
<li><a href="http://www./list22.htm"><img alt="装扮类" src="http://www./img2/a11.gif" /></a></li>
<li><a href="http://www./list26.htm"><img alt="休闲类" src="http://www./img2/a12.gif" /></a></li>
<li><a href="http://www./list15.htm"><img alt="儿童类" src="http://www./img2/a13.gif" /></a></li>
<li><a href="http://www./list16.htm"><img alt="测试类" src="http://www./img2/a14.gif" /></a></li>
<li><a href="http://www./list25.htm"><img alt="MTV类" src="http://www./img2/a12.gif" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
初步改进的处理
利用css sprite技术，将各个图片按排版方式输出到一张图片上,再用一个透明的gif图片替代原来的位置。
以下是HTML网页特效代码，点击运行按钮可查看效果：[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_</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(http://www./img/gsort.gif) no-repeat center;}
.gsort ul {margin:3px 0 0 4px;}
.gsort li {float: left;padding:3px;list-style:none outside;}
.gsort li img {width:56px;height: 69px;}
-->
</style>
</HEAD>
<BODY>
<dl><dt>初步改进后的效果</dt><dd class="gsort"><ul>
<li><a href="http://www./list20.htm"><img alt="动作类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list12.htm"><img alt="体育类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list10.htm"><img alt="益智类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list13.htm"><img alt="射击类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list26.htm"><img alt="综合类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list19.htm"><img alt="搞笑类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list17.htm"><img alt="冒险类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list18.htm"><img alt="棋牌类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list24.htm"><img alt="策略类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list11.htm"><img alt="敏捷类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list22.htm"><img alt="装扮类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list26.htm"><img alt="休闲类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list15.htm"><img alt="儿童类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list16.htm"><img alt="测试类" src="http://www./img/s.gif" /></a></li>
<li><a href="http://www./list25.htm"><img alt="MTV类" src="http://www./img/s.gif" /></a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
相对于传统的处理方式，本次修改将15个图片处理成2个图片，从性能上来讲大大减少了对web服务器的请求数，也就是说前端性能得到提升。
再次改进的处理
保留css sprite的处理，去掉占位图片，直接输出文字链接,再用css控制显示效果。
以下是HTML网页特效代码，点击运行按钮可查看效果：[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<TITLE>基于Sprite的图片导航的优化处理_</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(http://www./img/gsort.gif) 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="http://www./list20.htm">动作类</a></li>
<li><a href="http://www./list12.htm">体育类</a></li>
<li><a href="http://www./list10.htm">益智类</a></li>
<li><a href="http://www./list13.htm">射击类</a></li>
<li><a href="http://www./list26.htm">综合类</a></li>
<li><a href="http://www./list19.htm">搞笑类</a></li>
<li><a href="http://www./list17.htm">冒险类</a></li>
<li><a href="http://www./list18.htm">棋牌类</a></li>
<li><a href="http://www./list24.htm">策略类</a></li>
<li><a href="http://www./list11.htm">敏捷类</a></li>
<li><a href="http://www./list22.htm">装扮类</a></li>
<li><a href="http://www./list26.htm">休闲类</a></li>
<li><a href="http://www./list15.htm">儿童类</a></li>
<li><a href="http://www./list16.htm">测试类</a></li>
<li><a href="http://www./list25.htm">MTV类</a></li>
<span class="cls"></span></ul><span class="cls"></span></dd></dl>
</BODY>
</HTML>
相比上一次的改进，这次处理使得html源码更具可读性，DOM节点更加清晰简洁，文字锚点的链接方式也更利于se蜘蛛的爬行与索引。
通过以上两次改进，相信您对CSS的sprite技术有了一定的认识。概括地讲，CSS的sprite处理是指将网页中背景、图标等小图片集中到一张大图片上，再用CSS（利用background）控制其在页面上的显示，这样有效可以减少对web服务器的请求数，也可以使DOM更加清晰简洁。
当然，对于整站应用css sprite需要更多的是耐心和细心，本文旨在抛砖引玉，欢迎大家批评指正。
|
