html5 div 简单布局

最新推荐文章于 2024-02-18 19:14:26 发布

为了那份宁静

最新推荐文章于 2024-02-18 19:14:26 发布

阅读量8.8k

点赞数 3

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/linhaiguo/article/details/51077810

版权

HTML5/CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 div 布局</title>
    <style>
        body{
            margin: 0px;
            padding: 0px;
        }
            div#container{
                width: 100%;
                height:600px;
                background-color: #777777;
            }
        div#header{
            width: 100%;
            height: 10%;
            background-color: #0000FF;
        }
        div#content_menu{
            height: 80%;
            width: 30%;
            background-color: #0E2D5F;
            float: left;
        }
        div#content_body{
            width: 70%;
            height: 80%;
            float: left;
            background-color: #0092DC;
        }
        div#footer{
            width: 100%;
            height: 10%;
            background-color: #575765;
            clear: both;/**清除浮动*/
        }

    </style>
</head>
<body>
    <div id="container">
        <div id="header">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主题</div>
        <div id="footer">底部</div>
    </div>
</body>
</html>