本篇內(nèi)容主要講解“html怎么實現(xiàn)布局區(qū)域間隔變色”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“html怎么實現(xiàn)布局區(qū)域間隔變色”吧!
創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目成都網(wǎng)站建設、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元遂寧做網(wǎng)站,已為上家服務,為遂寧各地企業(yè)和個人服務,聯(lián)系電話:18982081108
前言
之前給客戶做了一個網(wǎng)站,整體是1200px寬.因此,網(wǎng)頁整體是放在一個 1200px的盒子里的.但是今天,客戶突然要求實現(xiàn)這樣的變色效果,一個區(qū)域是灰色的,一個區(qū)域是白色的.
原布局效果圖
想要達到的效果
思路
首先,我是拒絕更換html布局結構的.我真心不愿意去修改html的布局,因為牽扯到的地方會比較多,所以,如何在不改變html結構的情況下,實現(xiàn)這樣的需求呢?
背景圖片法
我們可以做一張背景圖片,是灰色和白色間隔的,讓他在整個網(wǎng)頁間平鋪.以實現(xiàn)偽裝的間隔變色.
優(yōu)點:不改變DOM結構.
缺點:
1. 要求所有版塊高度一致.
2. 不能兼顧頭尾.因為不修改html結構,就必然是在body或者html上面加背景圖片,這樣不能堅固頭尾
3. 如果兼顧頭尾,則必然還是要修改html結構,必須在所有需要變色的板塊外面加上一個100%寬的盒子
好了,綜合分析,背景圖片貌似不能完美解決我的問題.沒關系,我CSS很強大.猛然間我想到了一個牛逼的CSS屬性box-shadow.
box-shadow投影法
首先,看下我們現(xiàn)有的html結構
XML/HTML Code復制內(nèi)容到剪貼板
默認css如下
CSS Code復制內(nèi)容到剪貼板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
其他不想干的內(nèi)容就不寫了,主要就是這些參數(shù).
我的解決方案就是,利用box-shadow屬性,向左和向右分別加上相當于自身寬度的灰色投影,并且給自己加上灰色背景,這樣就實現(xiàn)了整體的變色.代碼如下:
CSS Code復制內(nèi)容到剪貼板
.home {width: 1200px;margin: 0 auto;}
.floor {
padding: 20px 0;height: 500px;width: 1200px;
box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;
background: #fafafa;
}
如上,果不其然,實現(xiàn)了灰色背景的平鋪.但是,所有的盒子都有了這個平鋪的灰色背景.我們需要實現(xiàn)的是間隔變色,而不是全部變成灰色的背景.
怎么辦?難道我需要去給.floor再加上一個樣式????
不需要,強大的css再一次雄起了!!
我把代碼改成了如下:
CSS Code復制內(nèi)容到剪貼板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
.floor:nth-child(2n){
box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;
background: #fafafa;
}
OK,完美實現(xiàn)效果.
思考
這個不是100%的平鋪的,而是寬度是有限的.這樣,在足夠高的分辨率下面,可能會產(chǎn)生問題哦.
但是,以我的例子來說,1200*3 = 3600 這樣的寬度,足夠勝任目前99.999%的顯示器了.剩下部分用4K的土豪,我相信也不會在這樣高分辨率的顯示器上全屏看網(wǎng)頁.所以,這樣寫是沒有問題的呀!!
但是,我們是講求完美的么.哪怕是百萬份之一的人會這樣做,也不能露怯呀.但是,我們的box-shadow是萬能的呀…我們再來改一下代碼:
CSS Code復制內(nèi)容到剪貼板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
.floor:nth-child(2n){
box-shadow: 1200px 0 #fafafa,2400px 0 #fafafa,-1200px 0 #fafafa,-2400px 0 #fafafa;
background: #fafafa;
}
改成這樣之后,就是 1200*5 = 6000 這樣的寬度,足夠再戰(zhàn)10年~~~
到此，相信大家對“html怎么實現(xiàn)布局區(qū)域間隔變色”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！
重慶分公司
重慶分公司
