经典布局方案

    1-上中下一栏式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>上中下一栏式布局</title>
 6         <style type="text/css">
 7             body{
 8                 /*解决顶部的空白*/
 9                 margin: 0;
10             }
11             .wrap{
12                 width: 900px;
13                 margin: 0 auto;
14                 text-align: center;
15             }
16             #header{
17                 height: 100px;
18                 background: #6cf;
19             }
20             #main{
21                 height: 500px;
22                 background: #ccffff;
23             }
24             #footer{
25                 height: 80px;
26                 background: #99ccff;
27             }
28         </style>
29     </head>
30     <body>
31         <header id="header" class="wrap">#header</header>
32         <section id="main" class="wrap">#main</section>
33         <footer id="footer" class="wrap">#footer</footer>
34     </body>
35 </html>
上中下一栏式布局

 

    2-左右两栏式（一）

　　2.1 混合浮动+普通流实现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>左右两栏式布局一</title>
        <style type="text/css">
            .wrap{
                margin: 0 auto;            
                width: 80%;
            }
            #left{
                width: 200px;
                height: 500px;
                background: #CCFFFF;
                float: left;
            }
            #right{
                height: 500px;
                background: #ffcccc;
                /*保证互不压盖，连续平铺*/
                margin-left: 200px;
            }
            
        </style>
    </head>
    <body>
        <div class="wrap">
            <aside id="left">#left</aside>
            <section id="right">#right</section>
        </div>
        <!--
            作者：offline
            时间：2018-11-12
            描述：
            方法一：混合浮动 + 普通流*/
        -->
    </body>
</html>
左右两栏式一

 

 　　2.2 纯浮动实现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>左右两栏式布局一</title>
        <style type="text/css">
            .wrap{
                margin: 0 auto;        
                /*可以实现自适应*/    
                width: 900px;
                /*清除浮动*/
                overflow: hidden;
            }
            #left{
                width: 200px;
                height: 500px;
                background: #CCFFFF;
                float: left;
            }
            #right{
                width: 700px;
                height: 500px;
                background: #ffcccc;
                float:left
            }
            
        </style>
    </head>
    <body>
        <div class="wrap">
            <aside id="left">#left</aside>
            <section id="right">#right</section>
        </div>
        <!--
            作者：offline
            时间：2018-11-12
            描述：
            方法一：纯浮动 */
        -->
    </body>
</html>
左右两栏式（二）

 

   

　　2.3 定位实现的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>左右两栏式布局一</title>
        <style type="text/css">
            .wrap{
                margin: 0 auto;        
                /*可以实现自适应*/    
                width: 900px;
                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>
    </head>
    <body>
        <div class="wrap">
            <aside id="left">#left</aside>
            <section id="right">#right</section>
        </div>
        <!--
            作者：offline
            时间：2018-11-12
            描述：
            方法三：绝对定位实现的*/
        -->
    </body>
</html>
定位实现的

 

  

 

    3-左右两栏加页眉页脚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>左右两栏加页眉页脚</title>
        <style type="text/css">
            .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;
            }
        </style>
    </head>
    <body>
        <header id="header" class="wrap">#header</header>
        <section id="main" class="wrap">
            <aside id="left">#left</aside>
            <div id="right">#right</div>
        </section>
        <footer id="footer" class="wrap">#footer</footer>
    </body>
</html>
左右两栏加页眉页脚

 

  

 

    4-左中右三栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #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 200px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <aside id="left">#left</aside>
            <aside id="right">#right</aside>
            <!--
                作者：offline
                时间：2018-11-12
                描述：左右两个必须放到main的前面，因为main会独占一行
            -->
            <section id="main">#main</section>
        </div>
    </body>
</html>
左中右三栏式布局

 

　

 

    5-左中右三栏之双飞翼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                margin: 0 auto;
                width: 80%;
            }
            #main{
                width: 100%;
                background: #FFCCCC;
                float: left;
            }
            #left{
                width: 200px;
                height: 500px;
                background: #CCFFFF;
                float: left;
                margin-left: -100%;
            }
            #right{
                width: 200px;
                height: 500px;
                background: #CCFFFF;
                float: left;
                margin-left: -200px;
            }
            .content{
                height: 500px;
                margin: 0 200px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <section id="main">
                <div class="content"></div>
            </section>
            <aside id="left">#left</aside>
            <aside id="right">#right</aside>
        </div>
    </body>
</html>
左中右三栏双飞翼布局

 

  


    6-左中右三栏加页眉页脚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .wrap{
                margin: 0 auto;
                width: 80%;
                text-align: center;
            }
            #main{
                height: 500px;
                background: #FFCCCC;
            }
            #middle{
                width: 100%;
                background: #FFCCCC;
                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;
            }
            
            #header{
                height: 100px;
                background: #66ccff;
            }
            
            #footer{
                height: 80px;
                background: #99ccff;
            }
        </style>
    </head>
    <body>
            <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>
    </body>
</html>
左中右三栏式加页眉页脚

   

 

posted @ 2018-11-12 21:57  yuelianggu  阅读(178)  评论(0)    收藏  举报