之前給客戶做了一個(gè)網(wǎng)站,整體是1200px寬.因此,網(wǎng)頁(yè)整體是放在一個(gè) 1200px的盒子里的.但是今天,客戶突然要求實(shí)現(xiàn)這樣的變色效果,一個(gè)區(qū)域是灰色的,一個(gè)區(qū)域是白色的.

原布局效果圖

想要達(dá)到的效果

思路

首先,我是拒絕更換html布局結(jié)構(gòu)的.我真心不愿意去修改html的布局,因?yàn)闋砍兜降牡胤綍?huì)比較多,所以,如何在不改變html結(jié)構(gòu)的情況下,實(shí)現(xiàn)這樣的需求呢?

背景圖片法

我們可以做一張背景圖片,是灰色和白色間隔的,讓他在整個(gè)網(wǎng)頁(yè)間平鋪.以實(shí)現(xiàn)偽裝的間隔變色.

優(yōu)點(diǎn):不改變DOM結(jié)構(gòu).

缺點(diǎn):

1. 要求所有版塊高度一致.
2. 不能兼顧頭尾.因?yàn)椴恍薷膆tml結(jié)構(gòu),就必然是在body或者h(yuǎn)tml上面加背景圖片,這樣不能堅(jiān)固頭尾
3. 如果兼顧頭尾,則必然還是要修改html結(jié)構(gòu),必須在所有需要變色的板塊外面加上一個(gè)100%寬的盒子

好了,綜合分析,背景圖片貌似不能完美解決我的問(wèn)題.沒(méi)關(guān)系,我CSS很強(qiáng)大.猛然間我想到了一個(gè)牛逼的CSS屬性box-shadow.

box-shadow投影法

首先,看下我們現(xiàn)有的html結(jié)構(gòu)

默認(rèn)css如下

其他不想干的內(nèi)容就不寫了,主要就是這些參數(shù).

我的解決方案就是,利用box-shadow屬性,向左和向右分別加上相當(dāng)于自身寬度的灰色投影,并且給自己加上灰色背景,這樣就實(shí)現(xiàn)了整體的變色.代碼如下:

如上,果不其然,實(shí)現(xiàn)了灰色背景的平鋪.但是,所有的盒子都有了這個(gè)平鋪的灰色背景.我們需要實(shí)現(xiàn)的是間隔變色,而不是全部變成灰色的背景.

怎么辦?難道我需要去給.floor再加上一個(gè)樣式????

不需要,強(qiáng)大的css再一次雄起了!!

我把代碼改成了如下:

OK,完美實(shí)現(xiàn)效果.

思考

這個(gè)不是100%的平鋪的,而是寬度是有限的.這樣,在足夠高的分辨率下面,可能會(huì)產(chǎn)生問(wèn)題哦.

但是,以我的例子來(lái)說(shuō),1200*3 = 3600 這樣的寬度,足夠勝任目前99.999%的顯示器了.剩下部分用4K的土豪,我相信也不會(huì)在這樣高分辨率的顯示器上全屏看網(wǎng)頁(yè).所以,這樣寫是沒(méi)有問(wèn)題的呀!!

但是,我們是講求完美的么.哪怕是百萬(wàn)份之一的人會(huì)這樣做,也不能露怯呀.但是,我們的box-shadow是萬(wàn)能的呀…我們?cè)賮?lái)改一下代碼:

改成這樣之后,就是 1200*5 = 6000 這樣的寬度,足夠再戰(zhàn)10年~~~

小結(jié)

CSS,真強(qiáng)大!!

本文由FungLeo原創(chuàng)
首發(fā)地址:http://blog.csdn.net/FungLeo/article/details/51661222

最新評(píng)論