<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.b{display: flex;
justify-content: space-around;
width: auto;
height: 25px;
background-color: black;
}
a{
font-size: 15px;
/*text-align: center;*/
color: white;
text-decoration: none;
}
.f{
display: flex;
flex-wrap: wrap ;
width: 1000px;
height: 500px;
background-color: bisque;
}
.left{
width: 200px;
height: 500px;
background-color: gray;
}
ul {
display: flex;
flex-wrap: wrap;
align-content:space-between;
justify-content: space-between;
}
li{
width: 200px;
height: 50px;
list-style: none;
color: white;
}
.right{
height: 500px;
width: 800px;
background-color: aquamarine;
}
.q{display: flex;
justify-content: center;
}
tr{
display: flex;
align-items: center;
}
td{
height: 35px;
width: 87px;
font-size: 14px;
}
table{
display: flex;
align-content: center;
}
</style>
</head>
<body>
<div class="b">
<a href="#">小米官网</a>
<a href="#">小米商城</a>
<a href="#">小米澎湃os</a>
<a href="#">loT</a>
<a href="#">云服务</a>
<a href="#">天星数科</a>
<a href="#">有品</a>
<a href="#">小爱开放平台</a>
<a href="#">资质证照</a>
<a href="#">协议规则</a>
<a href="#">下载app</a>
<a href="#">Select Location</a>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">消息通知</a>
<a href="#">购物车</a>
</div>
<div style="width: auto;height: 10px;"></div>
<div class="q" >
<img src="./7389cd4973897ce151dcea0eb80b40e.jpg" alt="" width="35px" height="35px">
<table >
<tr >
<td>xiaomi手机</td>
<td>Redmi手机</td>
<td>电视</td>
<td>笔记本</td>
<td>平板</td>
<td>家电</td>
<td>路由器</td>
<td>服务中心</td>
<td>社区</td>
</tr>
</table>
<input type="text" style="height: 30px; width: 150px;" placeholder=" 加湿器">
</div>
</div>
<div style="width: auto;height: 10px;"></div>
<center>
<div class="f">
<div class="left">
<ul>
<li>手机</li>
<li>电视</li>
<li>家电</li>
<li>笔记本 平板</li>
<li>出行 穿戴</li>
<li>耳机 音箱</li>
<li>健康 儿童</li>
<li>生活 箱包</li>
<li>智能 路由器</li>
<li> 电源配件</li>
</ul>
</div>
<div class="right"> <img src="./ad80213bd0df93fcfb349788d8e2bfa.jpg" alt="" width="800px" height="500px"></div>
</div>
</center>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
