双飞翼，圣杯布局 

 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>

 两种写法要看效果先注释掉一个

posted @ 2016-08-15 21:06  凉城丶旧梦  阅读(166)  评论(0)  编辑  收藏  举报