08、HTML&CSS-圖片整合

每天一句:如果你不能接受最差的我器一,你就不配擁有最好的我 课锌!如果你在我最低谷的時候離開厨内, 你就不要在我最輝煌的時候回來 祈秕!— 科比

一、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)系作者
  • 序言:七十年代末栗涂,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子祈争,更是在濱河造成了極大的恐慌斤程,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件菩混,死亡現(xiàn)場離奇詭異暖释,居然都是意外死亡袭厂,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門球匕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纹磺,“玉大人,你說我怎么就攤上這事亮曹¢涎睿” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵照卦,是天一觀的道長式矫。 經(jīng)常有香客問我,道長役耕,這世上最難降的妖魔是什么采转? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮瞬痘,結果婚禮上故慈,老公的妹妹穿的比我還像新娘。我一直安慰自己框全,他們只是感情好察绷,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著津辩,像睡著了一般拆撼。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上喘沿,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天闸度,我揣著相機與錄音,去河邊找鬼蚜印。 笑死莺禁,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的晒哄。 我是一名探鬼主播睁宰,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼寝凌!你這毒婦竟也來了柒傻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤较木,失蹤者是張志新(化名)和其女友劉穎红符,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡预侯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年致开,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萎馅。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡双戳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出糜芳,到底是詐尸還是另有隱情飒货,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布峭竣,位于F島的核電站塘辅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏皆撩。R本人自食惡果不足惜扣墩,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望扛吞。 院中可真熱鬧呻惕,春花似錦、人聲如沸喻粹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽守呜。三九已至,卻和暖如春山憨,著一層夾襖步出監(jiān)牢的瞬間查乒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工郁竟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留玛迄,地道東北人。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓棚亩,卻偏偏與公主長得像蓖议,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子讥蟆,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,167評論 25 707
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案勒虾? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 據(jù)說最美好的愛情是學生時期的愛情,據(jù)說最美好的戀人是在一起讀過書的同學瘸彤,幾乎每個人在他或她的學生時期都會有一段或幾...
    米啊米閱讀 311評論 8 4
  • 我與摩洛哥的不解之緣 2016年8月修然,在八個小時的網(wǎng)絡眾籌完成后,從廣州到北非,我一個人拖著行李箱走過摩洛哥15個...
    丶丶丶_ea4f閱讀 243評論 0 0
  • 0 沒有嚴浩導演,就沒有三毛寫劇本中贝。沒有張愛玲囤捻,也就沒有《滾滾紅塵》。 這部電影有太多東西可以說了邻寿,一上映就在金馬...
    吳知然閱讀 9,366評論 29 113