巧用box

2021-01-20 06:00 jianzhan
序言

以前给顾客做了1个网站,总体是1200px宽.因而,网页页面总体是放在1个 1200px的盒子里的.可是今日,顾客忽然规定完成这样的变色实际效果,1个地区是灰色的,1个地区是白色的.

原合理布局实际效果图

要想做到的实际效果

思路

最先,我是回绝拆换html合理布局构造的.我真心实意不肯意去改动html的合理布局,由于牵扯到的地区会较为多,因此,怎样在不更改html构造的状况下,完成这样的要求呢?

情况照片法

大家能够做1张情况照片,是灰色和白色间距的,让他在全部网页页面间平铺.以完成掩藏的间距变色.

优势:不更改DOM构造.

缺陷:

1. 规定全部版块高宽比1致.
2. 不可以兼具头尾.由于不改动html构造,就必定是在body或html上面加情况照片,这样不可以牢固头尾
3. 假如兼具头尾,则必定還是要改动html构造,务必在全部必须变色的板块外面再加1个100%宽的盒子

好了,综合性剖析,情况照片貌似不可以完善处理我的难题.没事儿,我CSS很强劲.猛地间我想起了1个牛逼的CSS特性box-shadow.

box-shadow投射法

最先,看下大家现有的html构造

XML/HTML Code拷贝內容到剪贴板
  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>  

默认设置css以下

CSS Code拷贝內容到剪贴板
  1. .home {width1200px;margin: 0 auto;}   
  2.     .floor {padding20px 0;height500px;width1200px;}   
  3.   


别的不想干的內容就不写了,关键便是这些主要参数.

我的处理计划方案便是,运用box-shadow特性,向左和向右各自再加非常于本身宽度的灰色投射,而且给自身再加灰色情况,这样就完成了总体的变色.编码以下:

CSS Code拷贝內容到剪贴板
  1. .home {width1200px;margin: 0 auto;}   
  2.     .floor {   
  3.         padding20px 0;height500px;width1200px;   
  4.         box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;   
  5.         background#fafafa;   
  6.     }   
  7.   

如上,果不其然,完成了灰色情况的平铺.可是,全部的盒子都有了这个平铺的灰色情况.大家必须完成的是间距变色,而并不是所有变为灰色的情况.

如何办?难道说我必须去给.floor再再加1个款式????

不必须,强劲的css再1次雄起了!!

我把编码改为了以下:

CSS Code拷贝內容到剪贴板
  1. .home {width1200px;margin: 0 auto;}   
  2.     .floor {padding20px 0;height500px;width1200px;}   
  3.     .floor:nth-child(2n){   
  4.         box-shadow: 1200px 0 #fafafa,-1200px 0 #fafafa;   
  5.         background#fafafa;   
  6.     }  

OK,完善完成实际效果.

思索

这个并不是100%的平铺的,而是宽度是比较有限的.这样,在充足高的辨别率下面,将会会造成难题哦.

可是,以我的事例来讲,1200*3 = 3600 这样的宽度,充足担任现阶段99.999%的显示信息器了.剩余一部分用4K的土豪,我坚信也不容易在这样高辨别率的显示信息器上全屏看网页页面.因此,这样写是沒有难题的呀!!

可是,大家是注重完善的么.哪怕是百万份之1的人会这样做,也不可以露怯呀.可是,大家的box-shadow是全能的呀…大家再来改1下编码:

CSS Code拷贝內容到剪贴板
  1. .home {width1200px;margin: 0 auto;}   
  2.     .floor {padding20px 0;height500px;width1200px;}   
  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 这样的宽度,充足再战10年~~~

小结

CSS,真强劲!!

本文由FungLeo原創
首发详细地址:http://blog.csdn.net/FungLeo/article/details/51661222