您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

圣杯布局和双飞翼布局

时间:01-31来源:作者:点击数:

无论是双飞翼布局还是圣杯布局,都是从下列的两个需要而产生的:

1.(基石)"center"元素必须是页面加载的第一个元素,不能放在其他的元素之后,以便加载的时候最先看到。因此,淘汰掉了浮动的方法。这个是两种布局产生的基础。

2.缩小页面的时候,“center”部分能够自适应,不会出现页面缩小了,内容也缺少了的现象。(center不需要设置高度,否则“自适应”成为空谈。)

双飞翼布局是圣杯布局的升级版本:可以不用写min-width防止网页界面缩小后变形,相对于圣杯布局,双飞翼布局CSS代码中少了给左右两侧栏定位的相关代码。但因此会要求在H5的.center结构中在增加一个.center_in.

圣杯布局的HTML结构:

<div class="container">
    <div  class="center">需要你写点东西,要不然页面显示不出来。</div>
    <div  class="left"></div>
    <div class="right"></div>
</div>

圣杯布局的css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left  {
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
            margin-left: -100%;
            position: relative;
            left:-200px;
        }
        .right  {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
        .center{
            width: 100%;
            //height: 200px;
            background-color:#00b0e0;
            float: left;
        }
        .container{
            min-width:400px;//需要设置最小宽度,防止一直缩小后变形。
            padding: 0 200px;
            background-color: #777777;
            /*float: left;*/
        }

    </style>

双飞翼布局HTML结构:

<div class="container">
    <div class="center">
        <div class="center_in">写点东西,要不然显示不了。</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

双飞翼布局的CSS:

   <style>
        *{
            padding: 0;
            margin: 0;
        }
        .left{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
            margin-left: -200px;
        }
        .center{
            //height: 200px;
            width: 100%;
            background-color: mediumpurple;
            /*padding-left: 200px;*/
            /*padding-right: 200px;*/
            float: left;
        }
        .center .center_in{
            margin-right: 200px;
            margin-left: 200px;
            width: 100%;
            background-color: yellow;
        }
    </style>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门