HTML-通过div来对网页进行排版

使用div对网页进行排版
因为div可以理解为是HTML里面的容器,而且div也可以进行嵌套

<!DOCTYPE html>
<html>
    <head>
        <title>Buju_div</title>
        <style>
            body{
                margin: 0px;
            }
            #container{

                width: 100%;
                height:1000px;
                background-color: darkgray;
            }
            #head{
                width: 100%;
                height: 10%;
                background-color: aqua;
            }
            #Left_menu{
                width: 30%;
                height: 80%;
                background-color: blue;
                float:left;
            }
            #right_body{
                width:70%;
                height: 80%;
                background-color: red;
                float: left;
            }
            #footing{
                width: 100%;
                height: 10%;
                background-color: purple;
                float: left;
            }

        </style>
    </head>
    <body>
        <div id='container'>
            <div id='head'>
                Head_Div
            </div>
            <div id='Left_menu'>ZuoBianCaidan</div>
            <div id='right_body'>Right_menu</div>
            <div id='footing'>Footer</div>
        </div>
    </body>
</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43635647/article/details/103655797