经典布局方案

时间：2018-11-13 00:07:39 阅读：173 评论：0 收藏：0 [点我收藏+]

标签：play info line class oct one 技术 height tle

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>