双飞翼布局，圣杯布局-原创手记-慕课网

1.双飞翼布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        .container{
            float:left;
            width:100%;

        }
        .left{
            background:red;
            float:left;
            margin-left:-100%;
            width:300px;
            height:100px;
        }
        .right{
            background:yellow;
            float:left;
            margin-left:-300px;
            width:300px;
            height:100px;
        }
        .center{

            background: blue;       
            margin-left:300px;
            margin-right:300px;
            height: 100px;

        }

    </style>
</head>
<body>
    <!--双飞翼实现三栏布局，首先加载中间部分-->
    <div class="container">
         <div class="center"></div>
    </div>
        <div class="left"></div>
        <div class="right"></div>

</body>
</html>

2.圣杯布局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
        .container{

             margin-left:300px;
             margin-right:300px;

        }
        .left{
            background:red;
            position:relative;
            float:left;
            width:300px;
            height:100px;
            margin-left:-100%;
            left:-300px;
        }
        .right{
            background:yellow;
            position:relative;
            float:left;
            margin-left:-300px;
            right:-300px;

            width:300px;
            height:100px;
        }
        .center{
            float:left;
            background: blue;       
            width:100%;
            height: 100px;

        }

    </style>
</head>
<body>
    <!--圣杯布局实现三栏布局，首先加载中间部分-->
    <div class="container">
         <div class="center"></div>
         <div class="left"></div>
         <div class="right"></div>  
    </div>  

</body>
</html>