[css] 经典的两栏三栏布局_html

需用到宽度自适应，窗口自适应，使用calc()布局

上下布局 下(左右)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .top{
            height: 100px;
            background-color: rgb(195, 169, 236);
        }
        .bot{
            height: calc(100% - 100px);
            background-color: rgb(202, 231, 168);
        }
        .lef{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(161, 161, 243);
        }
        .rig{
            width: calc(100% - 200px);
            height: 100%;
            float: left;
            background-color: rgb(238, 156, 197);
        }
    </style>
</head>
<body>
    <div class="top">上</div>
    <div class="bot">
        <div class="lef">左</div>
        <div class="rig">右</div>
    </div>
</body>
</html>

[css] 经典的两栏三栏布局_自适应_02

上中下 中(左右)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .top{
            height: 100px;
            background-color: rgb(233, 240, 145);
        }
        .bot{
            height: 100px;
            background-color: rgb(78, 78, 74);
        }
        .cen{
            height: calc(100% - 200px);
            background-color: rgb(202, 150, 150);
        }
        .lef{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(155, 155, 233);
        }
        
        .rig{
            width: calc(100% - 200px);
            height: 100%;
            float: left;
            background-color: rgb(233, 147, 190);
        }
    </style>
</head>
<body>
    <div class="top">上</div>
    <div class="cen">
        <div class="lef">左</div>
        <div class="rig">右</div>
    </div>
    <div class="bot">下</div>
</body>
</html>

[css] 经典的两栏三栏布局_html_03

上下布局 下(左中右)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .top{
            height: 100px;
            background-color: rgb(233, 240, 145);
        }
        
        .bot{
            height: calc(100% - 100px);
            background-color: rgb(179, 236, 187);
        }
        .lef{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(155, 155, 233);
        }
        .cen{
            width: calc(100% - 400px);
            height: 100%;
            float: left;
            background-color: rgb(233, 155, 223);
        }
        .rig{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(243, 171, 171);
        }
    </style>
</head>
<body>
    <div class="top">上</div>
    <div class="bot">
        <div class="lef">左</div>
        <div class="cen">中</div>
        <div class="rig">右</div>
    </div>
</body>
</html>

[css] 经典的两栏三栏布局_自适应_04

上中下布局 中(左中右)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .top{
            height: 100px;
            background-color: rgb(233, 240, 145);
        }
        
        .center{
            height: calc(100% - 200px);
            background-color: rgb(179, 236, 187);
        }
        .center .lef{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(155, 155, 233);
        }
        .center .cen{
            width: calc(100% - 400px);
            height: 100%;
            float: left;
            background-color: rgb(233, 155, 223);
        }
        .center .rig{
            width: 200px;
            height: 100%;
            float: left;
            background-color: rgb(243, 171, 171);
        }
        .bot{
            height: 100px;
            background-color: rgb(175, 204, 228);
        }

    </style>
</head>
<body>
    <div class="top">上</div>
    <div class="center">
        <div class="lef">左</div>
        <div class="cen">中</div>
        <div class="rig">右</div>
    </div>
    <div class="bot">下</div>
</body>
</html>

[css] 经典的两栏三栏布局_html_05