我都是會把工作中接觸到的新知識放在我的微博里面,但是由于微博總是限制我的字?jǐn)?shù),有很多內(nèi)容我都是分散成幾個部分,現(xiàn)在我就來整理一個,我積累的一個頁面布局的內(nèi)容。
在早期table風(fēng)行的年代,頁面布局中使用的小圖標(biāo),和背景會讓你的頁面中有非常多的圖片素材,這樣在加載的過程中就會很拖網(wǎng)速,造成頁面的用戶體驗(yàn)不好,現(xiàn)在div+css的廣泛使用,也改變了這一使用習(xí)慣,變成了將N多小圖標(biāo)集于一個大圖上,再通過div來定位需要用到的圖片部分,這樣操作能讓你的頁面少加載非常多的圖片素材,大大提升了網(wǎng)頁刷新的速度。
DIV背景定義參數(shù):background 設(shè)置元素的背景參數(shù),其中屬性依在寫博客之前 我都是會把工作中接觸到的新知識放在我的微博里面,但是由于微博總是限制我的字?jǐn)?shù),有很多內(nèi)容我都是分散成幾個部分,現(xiàn)在我就來整理一個,我積累的一個頁面布局的內(nèi)容。
在早期table風(fēng)行的年代,頁面布局中使用的小圖標(biāo),和背景會讓你的頁面中有非常多的圖片素材,這樣在加載的過程中就會很拖網(wǎng)速,造成頁面的用戶體驗(yàn)不好,現(xiàn)在div+css的廣泛使用,也改變了這一使用習(xí)慣,變成了將N多小圖標(biāo)集于一個大圖上,再通過div來定位需要用到的圖片部分,這樣操作能讓你的頁面少加載非常多的圖片素材,大大提升了網(wǎng)頁刷新的速度。
DIV背景定義參數(shù):background 設(shè)置元素的背景參數(shù),其中屬性依次為 background-color(背景色) | background-image(背景圖) | background-repeat(重復(fù)方式) | background-attachment(背景圖像固定還是滾動) | background-position(背景圖像位置)
關(guān)于background-position 定位的問題 在一張大背景下 對某一塊的取用時大背景的左上角 為原點(diǎn)(0,0),定位時,→指向x值減小,↓指向 y 值減少 所以在定位中,通常都是兩個負(fù)數(shù),在對定位的div進(jìn)行width height 限制 就可以取出自己想要的背景圖片了!
通常在使用的時候 樣式中定義為 background: url(/templates/v1/images/tips.png) 0 -17px; 這種格式是現(xiàn)在最常用的背景定位方式
寫一段完整的吧:
新聞熱點(diǎn)
疑難解答
圖片精選