简单布局 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            
        </script>
        
    <style type="text/css">
        /* 清除默认样式*/
        *{
        margin: 0px;
        padding: 0px;
        }
    .header{
        width: 1000px;
        height: 150px;
        background-color: antiquewhite;
        margin: 0 auto;
    }
    .content{
        width: 1000px;
        height: 300px;
        background-color: cornflowerblue;
        margin: 10px auto;
    }
    .left{
        width: 200px;
        height: 100%;
        background-color: burlywood;
        float: left;
    }
    .center{
        width: 580px;
        height: 100%;
        background-color: yellow;
        float: left;
        margin: 0 10px;
    }
    .right{
        width: 200px;
        height: 100%;
        background-color: pink;
        float: left;
    }
    .footer{
        width: 1000px;
        height: 150px;
        background-color: darkgrey;
        margin: 0 auto;
    }
    .up{
        height: 135px;
        width: 560px;
        background-color: greenyellow;
        margin: 10px 10px;
    }
    .down{
        height: 135px;
        width: 560px;
        background-color: wheat;
        margin: 10px 10px;
        float: left;
    }
    .l{
        width: 100px;
        height: 115px;
        float: left;
        background-color: palevioletred;
        margin: 10px 10px 10px 10px;
    }
    .r{
        width: 430px;
        height: 115px;
        float: left;
        background-color: skyblue;
        margin: 10px 10px 10px 0px;
    }
    </style>
       
    </head>
    <body>
    <!-- 头部div -->
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="center">
            <div class="up"></div>
            <div class="down">
                <div class="l"></div>
                <div class="r"></div>
            </div>
        </div>
        <div class="right"></div>
    </div>
    <div class="footer"></div>
    <!-- 主体内容div -->
    <!-- 底部信息div -->
    </body>
</html>

 

 

posted @ 2019-07-18 19:23  zuiaimiusi  阅读(118)  评论(0)    收藏  举报