div+css如何做出搜索栏以及上方这个哇

这俩我不清楚怎么做思路不是很清晰请问有人能做出来吗做的有点难受

灰色的用 ul,li
搜索框 input button 加上 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;
      }

      .navBox {
         width: 100%;
         height: 200px;
      }

      .navTopBox {
         width: 100%;
         height: 30px;
      }

      .navTopBox>ul {
         list-style: none;
         display: flex;
         background: #ECECEC;
         justify-content: flex-end;
         padding: 0 12px;
      }

      .navTopBox>ul>li {
         line-height: 30px;
         color: #AAAAAA;
         font-size: 12px
      }

      .navTopBox>ul>li>span {
         margin: 0 12px;
      }

      .serachBox {
         background: #990D1A;
         width: 100%;
         height: 100px;
         position: relative;
      }

      .serachBox .inp {
         width: 80%;
         height: 30px;
      }
      .serachBox .inpBox{
         width: 100%;
           /* line-height: 50px; */
           display: flex;
           justify-items: center;
           justify-content: center;
           position: absolute;
           bottom: 12px;
      }
      .serachBox .inpBox button{
         width: 5%;
         height: 34px;
      }
   </style>
</head>

<body>
   <div class="navBox">
      <div class="navTopBox">
         <ul>
            <li>淘宝网首页 <span>|</span></li>
            <li>我要买<span>|</span></li>
            <li>我的淘宝<span>|</span></li>
            <li>购物车</li>
         </ul>
      </div>
      <div class="serachBox">
         <div class="inpBox">
            <input type="text" class="inp"><button>搜商品</button><button>搜商品</button>
         </div>

      </div>
   </div>
</body>

</html>