html div test

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        body{margin: 0px; width: 100%;font-size: 16px;font-family: Verdana, Geneva, Tahoma, sans-serif;color: #333333;}

        .space{padding-left:10px;padding-top: 10px;}

        .top {background-color: aqua;height: 50px;display: flex;}        

        .top-menus {background-color:bisque;width: 200px;margin:auto 0px 0px auto;display: flex;}        

        .top-menu {background-color:blueviolet;width: 100%;padding-left:10px}        

        .main{display: flex;}

        .left {background-color: blueviolet; width:20%;}

        .left-menus {background-color: burlywood;width:90%; height:30px; margin:20px auto auto auto ;}

        .left-menu{background-color: chocolate; height: 100%;}

        .center{background-color: darkolivegreen;width:70%;height:500px}

        .center-top{background-color: darksalmon;}

        .center-main{background-color: darkviolet;}

        .right{background-color: forestgreen;width:10%}

        .bottom{background-color: gray;height: 50px;}

    </style>

</head>

<body>

    <div class="all">

        <div class="top space">  

            <div style="border: 1px solid;">top</div>      

            <div class="top-menus ">

                <div class="top-menu">top1</div>

                <div class="top-menu">top2</div>

                <div class="top-menu">top3</div>

            </div>

        </div>

        <div class="main">

            <div class="left space">left

                <div class="left-menus">

                    <div class="left-menu">menu1</div>

                    <div class="left-menu">menu2</div>

                    <div class="left-menu">menu3</div>

                </div>

            </div>

            <div class="center space">center</div>

            <div class="right space">right</div>

        </div>

        <div class="bottom space">botoom</div>

    </div>

</body>

</html>