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

原布局效果圖

想要達到的效果

思路

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

背景圖片法

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

優點:不改變DOM結構.

缺點:

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

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

box-shadow投影法

首先,看下我們現有的html結構

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表