巧用 css sprites

CSS Sprites优点

我们从前面了解到，CSS Sprites为什么突然跑火，跟能够提升网站性能有关。显而易见，这是它的巨大优点之一。普通制作方式下的大量图片，现在合并成一个图片，大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

CSS Sprites缺点

至于可维护性，这是一般双刃剑。可能有人喜欢，有人不喜欢，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐。而且算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。当然，在性能的口号下，这些都是可以克服的。

由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

前面我们也提到了，必须限制盒子的大小才能使用CSS Sprites，否则可能会出现出现干扰图片的情况。这就是说，在一些需要非单向的平铺背景和需 要网页缩放的情况下，CSS Sprites并不合适。YUI的解决方式是，加大图片之间的距离，这样可以保持有限度的缩放。

最近网站改版,新设计的网站其中栏目导航:如下图

 

最初打算这样写这个导航:

 

<div class="nav">

<div class="左边"><img....../ ></div>

<div class="右边边"><ul>.......</ul></div>

</div>

 

后来考虑代码比较复杂,如果点击后在中间的话. 那得需要3个DIV.

 

所以后来采用这个想法,也很符合语义化.

 

先来看代码:

 

html

 

Code
<div class="nav_channel">
<dl>
<dt class="nonce"></dt>
<dd><a href="#">领导讲话</a></dd>
<dd>|</dd>
<dd><a href="#">团的动态</a></dd>
<dd>|</dd>
<dd><a href="#">地方团委动态</a></ldd>
<dd>|</dd>
<dd><a href="#">中青发</a></dd>
<dd>|</dd>
<dd><a href="#">中青办发</a></dd>
<dd>|</dd>
<dd><a href="#">中青联发</a></dd>
<dd>|</dd>
<dd><a href="#">中青办联发</a></dd>
<dd>|</dd>
<dd><a href="#">地方团委</a></dd>
</dl>
</div>

 

css

 

Code
/*栏目导航样式*/
.nav_channel{margin-top:10px; background:url(../images/gqtdt_sprites_1.gif) repeat-x 0 10px; height:44px;}
.nonce{background:url(../images/gqtdt_sprites.gif) no-repeat -26px -36px; height:44px; width:105px; float:left;}
.nav_channel dl{padding-left:10px;}
.nav_channel dd{float:left; line-height:24px;height:24px; color:#fff; padding:15px 5px 0 5px;}
.nav_channel dd a{color:#fff;font-size:12px; text-decoration:none; display:block; }

 

.nav_channel{margin-top:10px; background:url(../images/gqtdt_sprites_1.gif) repeat-x 0 10px; height:44px;}

 

.nonce{background:url(../images/gqtdt_sprites.gif) no-repeat -26px -36px; height:44px; 

 

 核心在这两句代码

 

做web前端开发的朋友可以看看..

 

欢迎提出意见.