1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 /* 圣杯布局 */ 8 /** 9 * 1.先写大盒子100%宽 在写固定宽度的盒子 10 * 2.三个盒子都浮动 11 * 3.父元素写padding 12 * 4.固定元素写定位relative 13 */ 14 .box>div{ 15 float: left; 16 height: 200px; 17 } 18 .box{ 19 padding: 0 100px; 20 } 21 .main{ 22 width: 100%; 23 background: #f00; 24 } 25 .left{ 26 width: 100px; 27 background: #0f0; 28 margin-left: -100%; 29 position: relative; 30 left: -100px; 31 } 32 .right{ 33 width: 100px; 34 background: #00f; 35 margin-left: -100px; 36 position: relative; 37 right: -100px; 38 } 39 /* 双飞翼布局 */ 40 .box>div{ 41 float: left; 42 height: 200px; 43 } 44 .main{ 45 width: 100%; 46 background: #f00; 47 } 48 .main .center{ 49 margin: 0 100px; 50 width: 100%; 51 height: 100%; 52 background: black; 53 color: #fff; 54 } 55 .left{ 56 width: 100px; 57 background: #0f0; 58 margin-left: -100%; 59 } 60 .right{ 61 width: 100px; 62 background: #00f; 63 margin-left: -100px; 64 } 65 /* 双飞翼布局 */ 66 </style> 67 </head> 68 <body> 69 <!-- 圣杯布局 --> 70 <div class="box"> 71 <div class="main"></div> 72 <div class="left">111111</div> 73 <div class="right">11111</div> 74 </div> 75 <!-- （淘宝）双飞翼布局 --> 76 <div class="box"> 77 <div class="main"> 78 <div class="center">111111</div> 79 </div> 80 <div class="left">111111</div> 81 <div class="right">11111</div> 82 </div> 83 <script type="text/javascript"> 84 var reg=/d/ig; 85 var str='123afgcc'; 86 console.log(reg.test(str)); 87 </script> 88 </body> 89 </html>
两种写法要看效果先注释掉一个