你的最佳女友 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日

悬赏问题

  • ¥100 描述一下元器件的基本功能,pcba板的基本原理
  • ¥15 STM32无法向设备写入固件
  • ¥15 使用ESP8266连接阿里云出现问题
  • ¥15 BP神经网络控制倒立摆
  • ¥20 要这个数学建模编程的代码 并且能完整允许出来结果 完整的过程和数据的结果
  • ¥15 html5+css和javascript有人可以帮吗?图片要怎么插入代码里面啊
  • ¥30 Unity接入微信SDK 无法开启摄像头
  • ¥20 有偿 写代码 要用特定的软件anaconda 里的jvpyter 用python3写
  • ¥20 cad图纸,chx-3六轴码垛机器人
  • ¥15 移动摄像头专网需要解vlan