CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose

当我们在用CSS进行页面布局时，常常会遇到：三栏布局，两边顶宽，中间自适应且优先渲染。回想我们所接触过的QQ空间，人人网等个人主页时，常常会遇到此类的布局方式，因此我们应该如何解决？

圣杯布局

圣杯是指一种常用的网页布局，可以由现有的技术（无一没有缺点）来实现，找到一种最优的实现方法就好像寻找难以捉摸的圣杯一样。
我们先贴出实现代码再来具体讲解：

             圣杯布局       *{        margin: 0;        padding: 0;    }     h3{        color: gray;    }    .header{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .footer{        height: 100px;        margin: 0 auto;        border: 2px solid black;    }    .artice{        height: 500px;        margin: 15px auto;        border: 2px solid black;        padding-left: 250px;        padding-right: 200px;    }    .artice .left{        background-color: paleturquoise;        float: left;        width: 250px;        height: 500px;       margin-left: -100%;        position: relative;        left: -250px;    }    .artice .right{        background-color: #ff7d8e;        float: left;        width: 200px;        height: 500px;        margin-left: -200px;        position: relative;        right: -200px    }    .artice .middle{        background-color: pink;        float: left;        width: 100%;        height: 500px;    }  
    
This is Top

      
查看更多关于CSS经典布局之圣杯布局、双飞翼布局_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109179