页面布局

一列布局：通常作为网站的首页，页面内容较少。页面通常是固定宽度的。
两列布局：一般自适应宽度的两列布局很少，通常都是固定宽度的两列布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单列布局</title>
    <style type="text/css">
        /*清除自带样式*/
        body{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 800px;
            height: 300px;
            background-color: #ccc;
            margin: 0 auto;/*让内容居中显示*/
        }
        .top{
            height: 100px;
            background-color: blue;
        }
        .foot{
            width: 800px;
            height: 100px;
            background-color: #900;
            margin: 0 auto;/*让内容居中显示*/
        }
    </style>
</head>
<body>

    <div class="top"></div>
    <div class="main"></div>
    <div class="foot"></div>
</body>
</html>

一列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body{
        padding: 0;
        margin: 0;
    }
    .left{
        width: 30%;
        height:500px;
        background-color: #ddd;
        float: left;
    }
    .right{
        width: 70%;
        height: 500px;
        background-color: #999;
        float: right;
    }
    .main{
        width: 1000px;
        height: 600px;
        background-color: red;
        margin: 0 auto;
    }
</style>
</head>

<body>
    <div class="main">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .left{
            width: 33.3%;
            height: 500px;
            float: left;
            background-color: #ccc;
        }
        .right{
            width: 33.3%;
            height: 500px;
            float: right;
            background-color: #ddd;
        }
        .middle{
            width: 33.3%;
            height: 500px;
            float: left;
            background-color: #999;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div>
    <div class="right"></div>
</body>
</html>

三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 200px;
        height: 500px;        
        background-color: #ccc;
        position: absolute;/*使用绝对定位，让左侧元素停靠在页面的左侧。*/
        left: 0;
        top:0;
    }
    .middle{        
        height: 500px;    
        /*width: 500px;    */
        background-color: #999;
        margin: 0 300px 0 200px;
    }
    .right{
        width: 300px;
        height: 500px;        
        background-color: #ddd;
        position: absolute;/*使用绝对定位，让左侧元素停靠在页面的右侧。*/
        right: 0;
        top:0;
    }    
</style>
</head>
<body>    
        <div class="left">200px</div>
        <div class="middle">简介：如何用CSS进行网页布局？这可是前端工程师最最基本的技能，本课程教你怎么制作一列布局、二列布局、三列布局当然还有最通用的混合布局，而且你还可以选择让它固定还是自适应。用CSS重新规划你的网页，让你的网页从此更美观、更友好。</div>
        <div class="right">300px</div>    
</body>
</html>

特殊的三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合布局</title>
    <style type="text/css">
        /*清除自带样式*/
        body{
            margin: 0;padding: 0;
        }
        .main{
            width: 800px;height: 600px;background-color: #ccc;margin: 0 auto;/*让内容居中显示*/
        }
        .top{
            height: 100px;background-color: blue;
        }
        .head{
            height: 100px;width: 800px;background-color: #f60;margin: 0 auto;
        }
        .left{
            width: 200px;height: 600px;background-color: yellow;float: left;
        }        
        .right{
            width: 600px;height: 600px;background-color: #369;float: right;
        }
        .sub_l{
            width: 400px;height: 600px;background-color: green;float: left;
        }
        .sub_r{
            width: 200px;height: 600px;background-color: #09f;float: right;
        }        
        .foot{
            width: 800px;height: 100px;background-color: #900;clear: both; margin: 0 auto;/*让内容居中显示*/            
        }
    </style>
</head>
<body>

    <div class="top">
        <div class="head">
            
        </div>
    </div>
    <div class="main">
        <div class="left"></div>
        <div class="right">
            <div class="sub_l"></div>
            <div class="sub_r"></div>
        </div>
    </div>
    <div class="foot"></div>
</body>
</html>

混合布局

猜你喜欢