html如何把下面的图片做到一模一样？望告知

img

很简单的布局，div+flex就可以 ，头部、脚部、侧边栏 、内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 100vh;
        }
        .head{
            width: 100%;
            height: 10%;
            background: red;
        }
        .contentBox{
            width: 100%;
            height: 80%;
            display: flex;
        }
        .aside{
            width: 30%;
            height: 100%;
            background: greenyellow;
        }
        .content{
            width: 70%;
            height: 100%;
        }
        .footer{
            width: 100%;
            height: 10%;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
       <div class="head">头部</div>
       <div class="contentBox">
           <div class="aside">侧边栏</div>
           <div class="content">呢欧容</div>
       </div>
       <div class="footer">版权</div>
    </div>
</body>
</html>


<div><p>网站标题</p></div>
<div style="display:flex>
<div><<ul><li>菜单</li><li>html</li></ul></div>
<div>内容</div>
</div>
<div> 尾部</div>

实现代码如下，自己可以加背景颜色，望采纳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
     <div style="width:100%;height:18%">
       <p>网页标题</p>
     </div>
     <div style="display:flex;width:100%;height:70%">
     <div style="width:30%;height:100%">
        <ul>
          <li>菜单</li>
          <li>Html</li>
          <li>Css</li>
          <li>Js</li>
        </ul>
     </div>
     <div style="width:69%;height:100%">
        主要内容
     </div>
     </div>
     <div style="width:100%;height:10%"> 
      尾部内容
     </div>
</body>
</html>