每天一句:如果你不能接受最差的我,你就不配拥有最好的我 !如果你在我最低谷的时候离开, 你就不要在我最辉煌的时候回来 !— 科比
一、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>
作者:西门奄
链接:https://www.jianshu.com/u/77035eb804c3
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。