11.23作业

   <div class="one">
        <div><img class="one1" src="../照片/1.png"></div>
        <div > 
            <ul class="F">
                <li>xiaomi手机</li>
                <li>red手机</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>平板</li>
                <li>家电</li>
                <li>路由器</li>
                <li>服务中心</li>
                <li>社区</li>
            </ul>
        </div>
        <div class="a"> <input  class="one4" type="text" name="usernanme" placeholder="路由器"><button><img class="one5" src="../照片/6.jpg"></button></div>
    </div>
    <div class="two">
        <div class="two1"> 
            <ul class="f">
            <li>手机<span>></span></li>
            <li>电视<span>></span></li>
            <li>家电<span>></span></li>
            <li>笔记本平板<span>></span></li>
            <li>出行穿戴<span>></span></li>
            <li>耳机音箱<span>></span></li>
            <li>健康儿童<span>></span></li>
            <li>生活箱包<span>></span></li>
            <li>智能路由器<span>></span></li>
            <li>电源配件<span>></span></li>
        </div>
            <div class="two2"><img src="../照片/7.jpg">
               <img class="b" src="../照片/3.jpg">
               <img class="c" src="../照片/2.jpg">
               
             </div>
    </div>
</body>



.one{
    display: flex;
    justify-content: space-between;
    width: 1000px;
    height: 68px;
}
.one4{
    display: flex;
    width: 200px;
    height: 66bpx;
    align-items: center;
}
.one1{
    width: 50px;
    height: 50px;
   
}
.one5{
    display: flex;
    width: 50px;
    height: 40px;
}

.F{
    display: flex;
    width: 500px;
    justify-content: space-around;
    align-content: center;
    flex-direction: row;
    
}
li{
    list-style: none;
   

}
.two{
    display: flex;
    width: 1000px;
    height: 300%;
    background-color: aliceblue;
    display: flex;
    justify-content: space-between;
}
.two1{
    display: flex;
    justify-content: space-between;
    align-content: center;
    
    width: 300px;
    height: 300px;
    background-color:gray;
    opacity: 0.5;
}
.f{
    display: flex;
    width: 100px;
    flex-direction: column;
   align-content: center;
    
    justify-content: space-around;
    
}
.two2{
   position: relative;
}
.b{position: absolute;
   top: 120px;
   left: 0px;
  width: 30px;
  height: 30px;

}
.c{position: absolute;
    top: 120px;
    right: 0px;
    width: 30px;
  height: 30px;
}

.TH{
    width: 20px;
    height: 20px;
}
.a{
    display: flex;
}