圣杯结商谈双飞翼布局,圣杯构造飞翼澳门京葡网站

圣杯构造和双飞翼布局,圣杯构造飞翼

参考:

圣杯结商谈双飞翼布局,圣杯构造飞翼澳门京葡网站。圣杯布局的来路是二零零六年发在a list part上的那篇小说: 
 
双飞翼布局介绍-始于TmallUED: 

博客:

1.圣杯布局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>圣杯布局</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             min-width: 700px;
13         }
14         .clearfloat:after{
15             display: block;
16             clear:both;
17             content: "";
18             visibility: hidden;
19             height: 0;
20         }
21         .container{
22             overflow: hidden;
23             padding: 0 300px;
24         }
25         .col{
26             position: relative;
27             height: 700px;
28             float: left;
29             color: #fff;
30         }
31         .left,.right{
32             width: 300px;
33             background-color: #3b3b3b;
34         }
35         .main{
36             width: 100%;
37             background-color: #b3b3b3;
38         }
39         .left{
40             margin-left: -100%;
41             left: -300px;
42         }
43         .right{
44             margin-left:-300px;
45             right: -300px;
46         }
47 
48 
49     </style>
50 </head>
51 <body>
52     <div class="container .clearfloat">
53         <div class="main col">main</div>
54         <div class="left col">left</div>
55         <div class="right col">right</div>
56     </div>
57 </body>
58 </html>

2.双飞翼

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>双飞翼</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             min-width: 700px;
13         }
14         .clearfloat:after{
15             display: block;
16             clear:both;
17             content: "";
18             visibility: hidden;
19             height: 0;
20         }
21         .col{
22             height: 700px;
23             float: left;
24             color: #fff;
25         }
26         .left,.right{
27             width: 300px;
28             background-color: #3b3b3b;
29         }
30         .main{
31             width: 100%;
32             background-color: #b3b3b3;
33         }
34         .main-wrap{
35             margin: 0 300px;
36         }
37         .left{
38             margin-left: -100%;
39         }
40         .right{
41             margin-left: -300px;
42         }
43     </style>
44 </head>
45 <body>
46     <div class="container .clearfloat">
47         <div class="main col">
48             <div class="main-wrap">
49                 main
50             </div>
51         </div>
52         <div class="left col">left</div>
53         <div class="right col">right</div>
54     </div>
55 </body>
56 </html>

 

仿效:
圣杯布局的来历是二〇〇六年发在a list part上的那篇小说:
双飞翼布…

参谋阅读一下:
圣杯布局的来头是二零零七年发在a list
part上的那篇小说:
双飞翼布局介绍-始于天猫UED:
还大概有这里的大器晚成篇两个的可比:
双飞翼构造实战:

参考:

圣杯布局的来历是二零零五年发在a list part上的那篇作品: 
 
双飞翼布局介绍-始于TaobaoUED: 

博客:

理解:

  圣杯架交涉双飞翼结构均能够兑现四个三栏布局:中间栏先加载,然后是左栏,右栏;左右两栏宽度固定,中间栏宽度自适应(会基于浏览器的窗口的深浅而改换。)

圣杯构造完结原理:

(1)定义一个div,class为container容器,满含以下多个div,分别代表main(中间栏),left(左栏),right(右栏),注意:div的逐条分别是main,left,right,因为依据HTML文书档案的加载原理,写在前方的先加载到,所以要把main写在最前方。

(2)让main ,left,
right都左浮动。

发表评论

电子邮件地址不会被公开。 必填项已用*标注