css学习成果－双飞翼布局

来源：互联网发布：cnc加工中心手动编程编辑：程序博客网时间：2024/05/22 08:01

今天学习了css的双飞翼布局效果，就是一种利用margin-left, left, position=relative,float=left属性，给web页面三个元素设置位置的布局。因为像一个大鸟的身体和两边的翅膀，故名“双飞翼”。它和“圣杯”效果有些关联，这里，我们只给出双飞翼效果的布局代码。

当给一个div设置margin-left值为－100%，float=left,且position＝relative时，这个div就会顶到上面去。所以，这里middle div在左边，但是left div被顶到和middle div平级的位置。再设置一下middle div内容inner的margin left，就可以看似middle div在中间了。这是一节总结课。可以参考极客学院的视屏。

http://www.jikexueyuan.com/course/981.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS + DIV</title>    <style type="text/css">        body{            margin:0px;        }        .header{            background: red;            height:200px;        }        .content{            height: 300px;        }        .left{            background: yellow;            height:50px;            width: 150px;            margin-left: -100%;            float: left;            padding-bottom: 250px;            /*position: relative;*/            /*left: -150px;*/        }        .middle{            background: orange;            /*height:50px;*/            width: 100%;            float: left;        }        .right{            background: turquoise;            height:50px;            width: 200px;            float: left;            margin-left: -200px;            padding-bottom: 250px;            /*position: relative;*/            /*right: -200px;*/        }        .footer{            background: deepskyblue;            height:200px;        }        .inner{            margin-left: 150px;        }    </style></head><body>    <div class="header" >        我是头部    </div>    <div class="content">        <div class="middle">            <div class="inner">                我是中间            <p>                hello,world!            </p> <p>            hello,world!        </p> <p>            hello,world!        </p> <p>            hello,world!        </p> <p>            hello,world!        </p> <p>            hello,world!        </p> <p>            hello,world!        </p> <p>            hello,world!        </p>        </div>        </div>        <div class="left">            我是左边        </div>        <div class="right">            我是右边        </div>    </div>    <div class="footer">        我是尾部    </div></body></html>

效果如下：

0 0