减少图片HTTP请求的方案提高网站性能

核心提示： 效果如下： 注意：这五个按钮其实是在一张图片中方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活，减少图片HTTP请求的方案提高网站性能(3)，代码如下：<style>/*对div中所有span的样式设置*/#navbarspan{/*定义<

效果如下：

注意：这五个按钮其实是在一张图片中

方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。

代码如下：

<style>
/*　对div中所有span的样式设置　*/
#navbar　span　{
　　/*　定义<span>标签将截取的图片宽度和高度　*/
　　width:30px;　height:31px;
　　/*　添加包含了所有图标的图片　*/
　　background-image:url(http_request_img/imagemap.gif);
　　display:inline;　float:left;
}
　/*　background-position：指定图标在CSS　Sprites图片的偏移量
　　　　margin-left　和　margin-right　则用来定位图标位置
　*/
.home　　　　　{　background-position:0　0;　margin-left:2px;}
.gifts　　　　{　background-position:-35px　0;　margin-left:50px;}
.cart　　　　　{　background-position:-70px　0;　margin-left:120px;}
</style>
<div　id="navbar"　style="border:　2px　ridge　rgb(51,　51,　51);　padding:　4px　0pt;　background-color:#ff0;　width:　300px;　height:　32px;">
　　<a　href="javascript:alert('Home')"　title="Home">
　　　　　<span　class="home"></span></a>　<!--　注意：该span标签用来加载图片　-->
　　<a　href="javascript:alert('Gifts')"　title="Gifts">
　　　　<span　class="gifts"></span></a>　<!--　注意：该span标签用来加载图片　-->
　　<a　href="javascript:alert('Cart')"　title="Cart">
　　　　<span　class="cart"></span></a>　　<!--　注意：该span标签用来加载图片　-->
</div>