经典布局方式

上中下一栏式

image-20180803112942795

<style>
    body{
        margin:0;
        font-size:20px;
        text-align: center;
    }
    .warp{
        width: 900px;
        margin:0 auto;
    }
    #header{
        height:100px;
        background: #6cf;
    }
    #main{
        height:500px;
        background: #ccffff;
    }
    #footer{
        height:80px;
        background: #99ccff;
    }
</style>
<header id="header" class="warp">#header</header>
<section id="main" class="warp">#section</section>
<footer id="footer" class="warp">#footer</footer>

左右两栏式

image-20180803113534182

• 浮动+标准流式

<style>
    .wrap{
        margin:0 auto;
        width:80%;
    }
    #left{
        width:200px;
        height:500px;
        background: #ccffff;
        float: left;
    }
    #right{
        height: 500px;
        background: #ffcccc;
        margin-left:200px;
    }
</style>
<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>

• 浮动式

<style>
    .wrap{
        width:900px;
        margin:0 auto;
        overflow: hidden;
    }
    #left{
        width:200px;
        height:500px;
        background: #ccffff;
        float: left;
    }
    #right{
        width:700px;
        height:500px;
        background: #ffcccc;
        float: left;
    }
</style>
<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>

• 定位式

<style>
    .wrap{
        width:900px;
        margin:0 auto;
        position: relative;
    }
    #left{
        width:200px;
        height:500px;
        background: #ccffff;
        position: absolute;
        top:0;
        left:0;
    }
    #right{
        width:700px;
        height:500px;
        background: #ffcccc;
        position: absolute;
        top:0;
        right:0;
    }
</style>
<div class="wrap">
    <aside id="left"></aside>
    <section id="right"></section>
</div>

左右页眉页脚

image-20180803113936510

<style>
    .wrap{
        margin:0 auto;
        width:900px;
    }
    #header{
        height:100px;
        background: #66ccff;
    }
    #main{
        height:500px;
        background: #ffcccc;
    }
    #footer{
        height:80px;
        background: #99ccff;
    }

    #left{
        width:200px;
        height:100%;
        float: left;
        background: #ccffff;
    }
    #right{
        width:700px;
        height:100%;
        float: right;
        background: #7cd677;
    }
</style>
<header id="header" class="wrap"></header>
<section id="main" class="wrap">
    <aside id="left"></aside>
    <div id="right"></div>
</section>
<footer id="footer" class="wrap"></footer>

左中右三栏式

image-20180803114153428

<style>
    .wrap{
        margin:0 auto;
        width:80%;
    }
    #left{
        width: 200px;
        height:500px;
        background: #ccffff;
        float: left;
    }
    #right{
        width: 200px;
        height:500px;
        background: #ccffff;
        float: right;
    }
    #main{
        height:500px;
        background: #ffcccc;
        margin:0 210px;
    }
</style>
<div class="wrap">
    <aside id="left"></aside>
    <aside id="right"></aside>
    <section id="main"></section>
</div>

双飞翼左中右三栏布局

<style>
    .wrap{
        margin:0 auto;
        width:80%
    }
    #main{
        width:100%;
        float: left;
        background: #ffcccc;
    }
    #left{
        width:200px;
        float: left;
        height:500px;
        background: #ccffff;
        margin-left: -100%;
    }
    #right{
        width:200px;
        float: left;
        height:500px;
        background: #ccffff;
        margin-left:-200px;
    }
    .content{
        height:500px;
        margin:0 200px;
    }
</style>
<div class="wrap">
    <section id="main">
        <div class="content">#content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</div>

三栏加页眉页脚

image-20180803114537759

<style>
    .wrap{
        margin:0 auto;
        width:900px;
    }
    #header{
        height:100px;
        background: #66ccff;
    }
    #main{
        height:500px;
        background: #ffcccc;
    }
    #footer{
        height:80px;
        background: #99ccff;
    }

    #middle{
        width:100%;
        float: left;
    }
    #left{
        width:200px;
        height:100%;
        background: #ccffff;
        float: left;
        margin-left: -100%;
    }
    #right{
        width:200px;
        height:100%;
        background: #ccffff;
        float: left;
        margin-left: -200px;
    }
    .content{
        height:500px;
        margin:0 200px;
    }
</style>
<header id="header" class="wrap">#header</header>
<section id="main" class="wrap">
    <section id="middle">
        <div class="content">content</div>
    </section>
    <aside id="left">#left</aside>
    <aside id="right">#right</aside>
</section>
<footer id="footer" class="wrap">#footer</footer>