每天一句:如果你不能接受最差的我,你就不配擁有最好的我 !如果你在我最低谷的時候離開, 你就不要在我最輝煌的時候回來 !— 科比
一、CSS Sprites的原理(圖片整合技術(shù))/CSS精靈
什么是圖片整合?
將導(dǎo)航背景圖片,按鈕背景圖片等有規(guī)則的合并成一張背景圖,即將多張圖片合為一張整圖,然后用background-position來實現(xiàn)背景圖片的定位技術(shù);
圖片整合的優(yōu)勢:
1)通過圖片整合來減少對服務(wù)器的請求次數(shù),從而提高頁面的加載速度;
2)通過整合圖片來減小圖片的體積;
二、CSS Sprites的實現(xiàn)方法
什么是滑動門
滑動門是一個形象的稱呼,它利用CSS背景圖像可層疊性,并允許彼此之上進(jìn)行滑動來創(chuàng)造一些特殊動態(tài)效果;
滑動門特征:
通過滑動門技術(shù),可以使CSS設(shè)計出來的導(dǎo)航菜單兼具傳統(tǒng)布局的圖像效果,與CSS布局的高效擴(kuò)展性;
三、隱藏滾動條技巧
思路:
父元素較小,子元素較大(子元素中的滾動條是需要隱藏的),給父元素添加oveflow,即將超出部分隱藏;
<div style="height: 300px; width: 120px; background:red" class="scroll">
<div style="height:100%; width: 140px;" class=“content”>
……
</div>
</div>
<style>
/* 父元素是可以進(jìn)行滾動的,另外將子元素超出部分隱藏(即是滾動條部分)/
.scroll{
/ 水平方向: 隱藏滾動條/
overflow-x: hidden;
/ 垂直方向: 需要滾動,而不能將超出部分隱藏!!*/
overflow-y: auto;
}
.content{
overflow-x: hidden;
}
</style>