css布局：双飞翼布局与圣杯布局

来源：互联网发布：免费刷vip的软件编辑：程序博客网时间：2024/04/30 18:20

今天开班级会议，主要是讲讲毕业的事宜，其中一位同学说到他现在在专研一些新技术，但是我不建议他这么做，毕竟基础很重要编程主要学习的是思想

正题吧，前阵子朋友面试，有这么一个要求：

就是两边定宽，中间自适应的三栏布局

是不是感觉很简单，但是我事后试了试，发现不是那么简单，于是百度，发现了这么两个布局：双飞翼布局还有圣杯布局，两者具体的实现效果都是一样

两个都是通过设置margin以及浮动来实现的，唯一的区别应该说是一个是通过大嵌套小来实现居中的，直接上代码吧

圣杯布局：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>圣杯布局</title>
<link rel="stylesheet" href="layout1.css" />
   </head>
   <body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

css文件：

#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}

下面是双飞翼布局：

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title>双飞翼布局</title>
       <link rel="stylesheet" href="layout2.css" />
   </head>

   <body>
       <div id="hd">header</div>
       <div id="middle">
           <div id="inside">middle</div>
       </div>
       <div id="right">right</div>
       <div id="left">left</div>
       <div id="footer">footer</div>
   </body>

</html>

css文件：

#hd {
   height: 50px;
   background: #666;
   text-align: center;
}

#middle {
   float: left;
   width: 100%;
   height: 100px;
   background: blue;
}

#left {
   float: left;
   width: 200px;
   height: 100px;
   margin-left: -100%;
   background: #0c9;
}

#right {
   float: left;
   width: 200px;
   height: 100px;
   margin-left: -200px;
   background: #0c9;
}

#inside {
   margin: 0 200px 0 200px;
   height: 100px;
}

#footer {
   clear: both;
   height: 50px;
   background: #666;
   text-align: center;
}

两者还真没大区别，我个人比较喜欢用双飞翼布局，各有各爱好，希望大家掌握着必学的

阅读全文

1 0