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>
两种写法要看效果先注释掉一个
时间： 2024-09-30 19:17:05