zoukankan      html  css  js  c++  java
  • 背景图合并

    使用背景图合并技术,可以达到减少图片数量,从而减少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>

    效果实现:

             背景图合并 - 幸福镰刀 - HTML5_丁小怪

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

  • 相关阅读:
    luogu P3804 【模板】后缀自动机 (SAM)
    莫队
    luogu P4688 [Ynoi2016]掉进兔子洞
    FZOJ 2331 LYK loves graph
    字典树
    luogu P6623 [省选联考 2020 A 卷] 树
    luogu P6018 [Ynoi2010]Fusion tree
    luogu P3264 [JLOI2015]管道连接
    最小斯坦纳树
    9. 回文数
  • 原文地址:https://www.cnblogs.com/hr2014/p/3814851.html
Copyright © 2011-2022 走看看