使用盒模型制作网页设计

怎么用使用盒模型制作总体布局如图所示的网页 CSS3样式要独立写在CSS文件里面，通过链接样式使用，设置背景为淡蓝色，标题的背景颜色不能与背景的颜色相同

img

分好区域，然后画div就好了，用flex布局简单。

img


如有帮助，麻烦点个【采纳此答案】 谢谢啦^0^

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .main{
        width: 100%;
        height: 100vh;
        background-color: #87CEEB;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        padding-top: 40px;
    }
    .header{
        width: 100%;
        text-align: center;
        background: #DEB887;
        line-height: 40px;
        position: fixed;
        top: 0;
        left: 0;
    }
    .left{
        width: 10%;
        height: 100%;
        border: 1px solid;
        text-align: center;
        writing-mode: vertical-lr;
    }
    .right{
        width: 30%;
        height: 100%;
        border: 1px solid;
        
    }
    .center{
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid;
    }
    .r{
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .r_top{
        width: 100%;
        height: 30%;
    }
    .r_center{
        width: 100%;
        height: 40%;
    }
    .r_bottom{
        width: 100%;
        height: 30%;
    }
    </style>
    <body>
        <div class="main">
            <header class="header">标题</header>
            <div class="left">
                <a>超链接</a>
            </div>
            <div class="center">canvas动画</div>
            <div class="right">
              <div class="r r_top">svg动画</div>
              <div class="r r_center">视频</div>
              <div class="r r_bottom">字幕</div>
            </div>
        </div>
    </body>
</html>