首页 > 代码库 > 双飞翼布局

双飞翼布局

2024-07-16 20:06:52   220人阅读

　　div+css早已是现在布局最常用的一种方式，可是布局又有许多种，因网站的功能、外表、适应人群而异，网站采用的布局也将是各式各样。常用的布局技术又有双飞翼布局、瀑布式布局、响应式布局等等，现实的前端开发中又常常不可能只用一门技术完成布局，往往需要多种技术相结合。而今天我将在这里为大家以最简单最直接的方式了解双飞翼布局。
      如果把双飞翼布局的左中右三栏看作是一只大鸟，那么可以把main看作是鸟的身体，left与right则可以理解为鸟的左翼与右翼。而此布局最重要的是将身体先对好，然后左翼与右翼移至身体的两侧。而其中我们经常使用浮动 float、负边距 negative margin与相对定位 relative position来完成各种布局。
      接下来我们来实现第一步：将身体摆好。

 1 <!doctype html> 2 <html> 3 <head> 4     <title> 双飞翼布局</title> 5     <meta charset="utf-8"> 6     <style> 7         .main{ 8             width:100%; 9             height:200px;10             background-color:black;11         }12     </style>13 </head>14  <body>15   <div class="main"><div>16  </body>17 </html>

 

 实现结果如下：（其中最要注意的是width:100%，即适应浏览器的变化而变化。不然也失去双飞翼的意义了。） 

接下来来摆正双翼

 1 <!doctype html> 2 <html> 3 <head> 4     <title> 双飞翼布局</title> 5     <meta charset="utf-8" /> 6     <style> 7         .main{ 8             width:100%; 9             height:200px;10             background-color:black;11             float:left;12         }13 14         .left{15             width:200px;16             height:200px;17             background-color:#faa;18             float:left;19             margin-left:-100%;20         }21 22         .right{23             width:200px;24             height:200px;25             background-color:#aaf;26             float:left;27             margin-left:-200px;28         }29     </style>30 </head>31  <body>32   <div class="main"></div>33   <div class="left">左</div>34   <div class="right">右</div>35  </body>36 </html>

 

结果如下： 

上面可以看到，左右两翼中最重要的是将把margin-left设置成负边距(其实还有另一种方法可以不设置负边距)然后所有的都设置成浮动。

最后，我们只需要要背上一点，双飞翼便“飞”了起来。

<!doctype html><html><head>    <title> 双飞翼布局</title>    <meta charset="utf-8" />    <style>        .main{            width:100%;            height:200px;            background-color:black;            float:left;        }        .left{            width:200px;            height:200px;            background-color:#faa;            float:left;            margin-left:-100%;        }        .right{            width:200px;            height:200px;            background-color:#aaf;            float:left;            margin-left:-200px;        }        .main-content{            height:200px;            margin:0 200px 0 200px;            background-color:#afa;        }    </style></head> <body>  <div class="main">    <div class="main-content">我是正文中的内容</div>  </div>  <div class="left">左</div>  <div class="right">右</div> </body></html>

结果如下：

上面看到最重要的是将main-content放在main里，我们也就可以在main中随意的写我们的内容了，而main-content是没有设置宽度的，有设置边距，这样我们就可以自适应浏览器的大小了。

以上就是双飞翼布局的最简单、最直接的书写方式了。而布局是没有任何限制的，没有一个布局可能通用网站，而掌握了最简单，最基础的布局方法，理解透彻了，其所有布局都能轻易掌握了，正所谓一通百通便是如此。


联系
我们