08、HTML&CSS-图片整合

每天一句：如果你不能接受最差的我，你就不配拥有最好的我 ！如果你在我最低谷的时候离开， 你就不要在我最辉煌的时候回来 ！— 科比

一、CSS Sprites的原理(图片整合技术)/CSS精灵

• 什么是图片整合?
  将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position来实现背景图片的定位技术；
• 图片整合的优势:
  1）通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度;
  2）通过整合图片来减小图片的体积;

二、CSS Sprites的实现方法

• 什么是滑动门
  滑动门是一个形象的称呼，它利用CSS背景图像可层叠性，并允许彼此之上进行滑动来创造一些特殊动态效果;
• 滑动门特征：
  通过滑动门技术，可以使CSS设计出来的导航菜单兼具传统布局的图像效果，与CSS布局的高效扩展性;

三、隐藏滚动条技巧

思路: 
  父元素较小，子元素较大(子元素中的滚动条是需要隐藏的)，给父元素添加oveflow，即将超出部分隐藏;

<div style="height: 300px;  width: 120px; background:red" class="scroll"> 
        <!-- 子元素的滚动条需要隐藏-->
    <div style="height:100%; width: 140px;" class=“content”> 
            ……
    </div>
</div>

<style>
    /* 父元素是可以进行滚动的，另外将子元素超出部分隐藏(即是滚动条部分)*/
   .scroll{
        /* 水平方向: 隐藏滚动条*/
        overflow-x: hidden;
        /* 垂直方向: 需要滚动，而不能将超出部分隐藏!!*/
        overflow-y: auto;
    }    
    .content{
        overflow-x: hidden;
    }
</style>