经典页面布局学习

总结几种常用的页面布局

上中下布局

<!DOCTYPE html>
<!--上中下布局-->
<html lang="en">
<style>
    body {
        margin: 0
    }

    .wrap {
        width: 900px;
        /* 居中 */
        margin: 0 auto; 
        font-size: 20px;
        /* 文字居中 */
        text-align: center;
    }

    #header {
        height: 100px;
        background: #6cf;
    }

    #main {
        height: 500px;
        background: #ccffff
    }

    #footer {
        height: 80px;
        background: #9cf
    }
</style>

<head>
    <meta charset="UTF-8">
    <title>我的修炼</title>
</head>

<body>
    <header id="header" class='wrap'>#header</header>
    <section id="main" class='wrap'>#section</section>
    <footer id="footer" class='wrap'>#footer</footer>
</body>

</html>

页面运行效果：

上中下

左右两栏布局

<!-- 左右两栏布局 -->
<html lang='en'>

<head>
    <meta charset="UTF-8">
    <title>左右两栏布局</title>
    <style>
        body {
            margin: 0px;
        }

        .wrap {
            width: 900px;
            margin: 0 auto;
        }

        #left {
            width: 200px;
            /* 向左浮动 */
            float: left;
            height: 500px;
            background: #ccffff;
        }

        #right {
            /* 自适应宽度 */
            margin-left: 200px;
            background: #ffcccc;
            height: 500px;
        }
    </style>
</head>
</head>

<body>
    <div class="wrap">
        <aside id="left">left</aside>
        <section id="right">rigth</section>
    </div>
</body>

</html>

页面运行效果：

左右两栏布局

左右两栏纯浮动实现
宽度固定，不能自适应

<!-- 纯浮动实现方案 -->
<html lang='en'>

<head>
    <meta charset="UTF-8">
    <title>左右两栏布局</title>
    <style>
        body {
            margin: 0px;
        }

        .wrap {
            width: 900px;
            margin: 0 auto;
            /* 清除浮动 */
            overflow: hidden; 
        }

        #left {
            width: 200px;
            float: left;
            height: 500px;
            background: #ccffff;
        }

        #right {
            width: 700px;
            background: #ffcccc;
            height: 500px;
            float: right;
        }
    </style>
</head>
</head>

<body>
    <div class="wrap">
        <aside id="left">left</aside>
        <section id="right">right</section>
    </div>
</body>

</html>

页面运行效果：

纯浮动实现方案

左右页眉页脚布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右页眉页脚布局</title>
    <style>
        .wrap {
            width: 900px;
            margin: 0 auto;
        }
        header{
            height: 200px;
            background: #72418f;
        }
        #main {
            overflow: hidden;
        }
        #left {
            float: left;
            width:200px;
            background: #4f9655;
            height: 400px;
        }
        #right { 
            float: right;
            width: 700px;
            background: #1337ad;
            height: 400px;
        }
        footer {
            height: 180px;
            background: #e6bc02;
            /* clear:both */
        }
    </style>
</head>
<body>
    <div class="wrap">
        <header>header</header>
        <div id='main'>
            <aside id='left'>left</aside>
            <section id='right'>rigth</section>
        </div>
        <footer>footer</footer>
    </div>
</body>
</html>

页面运行效果：

左右页眉页脚布局

左中右三栏布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>左中右3栏布局</title>
    <style>
        .wrap {
            /* 根据屏幕的宽度自适应 */
            width: 80%; 
            margin: 0 auto;
            height: 700px;
        }

        #left {
            float: left;
            width: 200px;
            height: 100%;
            background: #d4a6a6;
        } 

        #center {
            height: 100%;
            margin: 0 210px;
            background: #68d646;
        }

        #right {
            float:right;
            width:200px; 
            height: 100%;
            background: #3014cc
        }
    </style>
</head>

<body>
    <div class="wrap">
        <section id="left"></section>
        <section id="right"></section>
        <section id="center"></section>
    </div>
</body>

</html>

页面运行效果：

左中右

左中右三栏之双飞翼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>左中右三栏之双飞翼</title>
    <style>
        .wrap {
            width: 80%;
            margin: 0 auto;
        }

        #main {
            float: left;
            width: 100%;
        }

        #content { 
            background: #e7890e;
            height: 500px;
            margin: 0 200px;
        }

        #left {
            float: left;
            width: 200px;
            height: 500px;
            background: #52d814;
            margin-left: -100%;
        }

        #right {
            float: left;
            width: 200px;
            height: 500px;
            background: #3110a8;
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <section id="main">
            <div id="content">content</div>
        </section>
        <aside id="left">left</aside>
        <aside id="right">right</aside>
    </div>
</body>

</html>

页面运行效果：

双飞翼布局

7: 左中右三栏加页眉页脚

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左中右三栏加页眉页脚</title>
    <style>
        .wrap {
            margin: 0 auto;
            width: 80%
        }

        #header {
            height: 100px;
            background: #9dcf80
        }

        #main {
            height: 500px;
        }

        #footer {
            height: 80px;
            background: #5b79df;
        }

        #middle {
            float: left;
            width: 100%;
            background: #262341;
        }

        #left {
            float: left;
            height: 500px;
            width: 200px;
            background: #99609e;
            margin-left: -100%;
        }

        #right {
            float: left;
            height: 500px;
            width: 200px;
            background: #99609e;
            margin-left: -200px;
        }

        #content {
            height: 500px;
            margin: 0 200px;
        }
    </style>
</head>

<body>
    <header id="header" class="wrap"></header>
    <section id="main" class="wrap">
        <div id="middle">
            <section id='content'></section>
        </div>
        <aside id='left'></aside>
        <aside id="right"></aside>
    </section>
    <footer id="footer" class="wrap"></footer>
</body>

</html>

页面运行效果：

左中右三栏加页眉页脚