码迷,mamicode.com
首页 > 其他好文 > 详细

背景图合并

时间:2014-06-29 19:54:01      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:http   使用   html   工作   代码   c   

使用背景图合并技术,可以达到减少图片数量,从而减少HTTP请求的目的,对网站加速有着举足轻重的作用。背景图合并的优势:

a)   可扩展,便于后期维护,当遇到排版变化时,比较容易维护。

b)   宽度自适应本身就减少了页面的工作量,背景图合并可以和宽度自适应结合在一块,大大减少了页面数量和图片大小,提升页面的loading速度。

例:

 

CSS样式:

.aaa{height:34px;float:left;background:url("images/i.gif") 0 -34px repeat-x;}

.bbb{height:34px;background:url("images/i.gif") 0 0 no-repeat;}

.ccc{height:34px;background:url("images/i.gif") right -68px no-repeat;line-height:34px;}

html代码:

<div class="aaa">

       <div class="bbb">

              <div class="ccc">菜单</div>

       </div>

</div>

 

效果实现:

         bubuko.com,布布扣

 实现原理:截取导航背景图左边条,中间条,右边条各一条,然后使用中间条平铺,然后在左右各放上左边条和右边条,使用三层嵌套。

背景图合并,布布扣,bubuko.com

背景图合并

标签:http   使用   html   工作   代码   c   

原文地址:http://www.cnblogs.com/hr2014/p/3814851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!