前言
之前给客户做了一个网站,整体是
1200px宽.因此,网页整体是放在一个
1200px的盒子里的.但是今天,客户突然要求实现这样的变色效果,一个区域是灰色的,一个区域是白色的.原布局效果图
想要达到的效果
思路
首先,我是拒绝更换html布局结构的.我真心不愿意去修改html的布局,因为牵扯到的地方会比较多,所以,如何在不改变html结构的情况下,实现这样的需求呢?
背景图片法
我们可以做一张背景图片,是灰色和白色间隔的,让他在整个网页间平铺.以实现伪装的间隔变色.
优点:不改变DOM结构.
缺点:
1. 要求所有版块高度一致.
2. 不能兼顾头尾.因为不修改html结构,就必然是在body或者html上面加背景图片,这样不能坚固头尾
3. 如果兼顾头尾,则必然还是要修改html结构,必须在所有需要变色的板块外面加上一个100%宽的盒子
好了,综合分析,背景图片貌似不能完美解决我的问题.没关系,我CSS很强大.猛然间我想到了一个牛逼的CSS属性box-shadow.
box-shadow投影法
首先,看下我们现有的html结构
XML/HTML Code复制内容到剪贴板
<div class="home">
<section class="floor"></section>
<section class="floor"></section>
<section class="floor"></section>
<section class="floor"></section>
<section class="floor"></section>
</div>
默认css如下
CSS Code复制内容到剪贴板
.home {width: 1200px;margin: 0 auto;}
.floor {padding: 20px 0;height: 500px;width: 1200px;}
其他不想干的内容就不写了,主要就是这些参数.
我的解决方案就是,利用box-shadow属性,向左和向右分别加上相当于自身宽度的灰色投影,并且给自己加上灰色背景,这样就实现了整体的变色.
CSS Code复制内容到剪贴板
.home {width: 1200px;margin: 0 auto;}
.floor {
padding: 20px 0;height: 500px;width: 1200px;
