<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;
}
11.23作业
于 2023-11-30 09:29:04 首次发布