亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

巧用box-shadow實現(xiàn)布局區(qū)域間隔變色

  發(fā)布時間：2016-06-16 16:30:39   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了巧用box-shadow實現(xiàn)布局區(qū)域間隔變色的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言

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

原布局效果圖

原布局效果圖

想要達(dá)到的效果

想要達(dá)到的效果

思路

首先,我是拒絕更換html布局結(jié)構(gòu)的.我真心不愿意去修改html的布局,因為牽扯到的地方會比較多,所以,如何在不改變html結(jié)構(gòu)的情況下,實現(xiàn)這樣的需求呢?

背景圖片法

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

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

缺點(diǎn):

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

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

box-shadow投影法

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="home">  
  2.     <section class="floor"></section>  
  3.     <section class="floor"></section>  
  4.     <section class="floor"></section>  
  5.     <section class="floor"></section>  
  6.     <section class="floor"></section>  
  7. </div>  

默認(rèn)css如下

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .home {width: 1200px;margin: 0 auto;}   
  2.     .floor {padding: 20px 0;height: 500px;width: 1200px;}   
  3.   


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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .home {width: 1200px;margin: 0 auto;}   
  2.     .floor {   
  3.         padding: 20px 0;height: 500px;width: 1200px;   
  4.         box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;   
  5.         background: #fafafa;   
  6.     }   
  7.   

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

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

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

我把代碼改成了如下:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .home {width: 1200px;margin: 0 auto;}   
  2.     .floor {padding: 20px 0;height: 500px;width: 1200px;}   
  3.     .floor:nth-child(2n){   
  4.         box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;   
  5.         background: #fafafa;   
  6.     }  

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

思考

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

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

但是,我們是講求完美的么.哪怕是百萬份之一的人會這樣做,也不能露怯呀.但是,我們的box-shadow是萬能的呀…我們再來改一下代碼:

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .home {width: 1200px;margin: 0 auto;}   
  2.     .floor {padding: 20px 0;height: 500px;width: 1200px;}   
  3.     .floor:nth-child(2n){   
  4.         box-shadow: 1200px 0 #fafafa,2400px 0 #fafafa,-1200px 0 #fafafa,-2400px 0 #fafafa;   
  5.         background: #fafafa;   
  6.     }   
  7.   

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

小結(jié)

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

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

相關(guān)文章

最新評論