简单布局 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>固定布局和自适应布局</title>
        <style type="text/css">
        /*清除默认样式*/
        *{
            margin: 0;
            padding: 0;
        }
            /*头部*/
            .header{
                width: 1000px;
                height: 120px;
                background-color: #BBFFAA;
                /*设置居中*/
                margin: 0 auto;
            }
            
            /*主要内容*/
            .content{
                width: 1000px;    
                height: 400px;
                background-color: orange;
                margin: 10px auto;
            }
            
            /*设置content中小div样式*/
            .lef{
                width: 200px;
                height: 100%;
                background-color: skyblue;
                float: left;
            }
            
            .cent{
                width: 580px;
                height: 400px;
                background-color: yellow;
                float: left;
                /*设置水平外边距*/
                margin: 0 10px;
            }
            .cent .tto{
                width: 580px;
                height: 180px;
                background-color: limegreen;
                margin: 10px auto;
            }
            .cent .bot{
                width: 580px;
                height: 190px;
                background-color: aqua;
                margin: 10px auto;
            }
            
            .righ{
                width: 200px;
                height: 100%;
                background-color: pink ;
                float: left;
            }
            /*底部*/
            .footer{
                width: 1000px;
                height: 120px;
                background-color: silver;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        
        <!-- 头部 -->
        <div class="header"></div>
        <!-- 主要内容 -->
        <div class="content">
            <div class="lef"></div>
            
            <div class="cent">
                <div class="tto"></div>
                <div class="bot"></div>
            </div>
            
            <div class="righ"></div>
        </div>
        <!-- 底部 -->
        <div class="footer"></div>
    </body>
</html>

页面布局分为固定布局和自适应布局

margin ：0 auto；0 垂直方向 auto 水平方向

posted @ 2021-07-05 11:47  2237774566  阅读(22)  评论(0)    收藏  举报