day_08

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