2017-12-04HTML布局＿div布局

HTML布局＿div布局

<!doctpye>
<html>
<head>
    <meta charset = 'utf-8'>
    <title>HTML布局</title>
    <meta name = 'keywords' content = 'HTML布局,div布局>
    <meta name = 'description' content = 'HTML布局div布局介绍'>
    <style>
        body{
            margin:0px;
        }
        #container{
            background-color:pink;
            width:100%;
            height:770px;
        }
        #heading{
            background-color:aqua;
            width:100%;
            height:10%;
        }
        #content_menu{
            background-color:aquamarine;
            width:30%;
            height:80%;
            float:left;
        }
        #content_body{
            background-color:blueviolet;
            width:70%;
            height:80%;
            float:left;
        }
        #footing{
            background-color:blue;
            width:100%;
            height:10%;
            clear:both;
        }
    </style>
</head>
<body>
    <div id = 'container' >
        <div id = 'heading'>头部</div>
        <div id = 'content_menu'>内容菜单</div>
        <div id = 'content_body'>内容主体</div>
        <div id = 'footing'>底部</div>    
    </div>
</body>
</html>

 

posted @ 2017-12-04 17:10  阿混1985  阅读(171)  评论(0)  编辑  收藏  举报