每天一句:如果你不能接受最差的我器一,你就不配擁有最好的我 课锌!如果你在我最低谷的時候離開厨内, 你就不要在我最輝煌的時候回來 祈秕!— 科比
一、CSS Sprites的原理(圖片整合技術)/CSS精靈
- 什么是圖片整合?
將導航背景圖片雏胃,按鈕背景圖片等有規(guī)則的合并成一張背景圖请毛,即將多張圖片合為一張整圖,然后用background-position來實現(xiàn)背景圖片的定位技術瞭亮;
- 圖片整合的優(yōu)勢:
1)通過圖片整合來減少對服務器的請求次數(shù)方仿,從而提高頁面的加載速度;
2)通過整合圖片來減小圖片的體積;
二、CSS Sprites的實現(xiàn)方法
- 什么是滑動門
滑動門是一個形象的稱呼统翩,它利用CSS背景圖像可層疊性仙蚜,并允許彼此之上進行滑動來創(chuàng)造一些特殊動態(tài)效果;
- 滑動門特征:
通過滑動門技術,可以使CSS設計出來的導航菜單兼具傳統(tǒng)布局的圖像效果厂汗,與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>
最后編輯于 :
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者