你的最佳女友 2022-03-22 18:58 采纳率: 88.9%
浏览 55
已结题

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

img


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

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-03-23 09:40
    关注

    灰色的用 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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题？

问题事件

  • 系统已结题 4月3日
  • 已采纳回答 3月26日
  • 创建了问题 3月22日