<!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>
* {
margin: 0 auto;
padding: 0;
}
.box {
width: 1226px;
height: 460px;
display: flex;
flex-direction: column;
}
.top {
width: 1226px;
height: 100px;
background-color: white;
display: flex;
justify-content: space-between;
}
.sup-left {
width: 30%;
margin: auto;
}
.sup-center {
width: 80px;
height: 15px;
margin: auto;
}
.sup-right {
width: 45%;
margin: auto;
}
.search-input {
width: 100%;
padding: 10px;
border-radius: 4px;
font-size: 16px;
background: none;
}
.bottom {
width: 1226px;
height: 360px;
background-color: gray;
display: flex;
}
.left {
width: 20%;
padding-left: 20px;
}
.right {
width: 80%;
}
.sub-left {
height: 10%;
box-sizing:border-box;
}
.search-input{
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="top">
<div class="sup-left">
<img src="../picture/xaiomi .png" alt="" style="max-width:75%;max-height: 75%;">
</div>
<div class="sup-center">Xiaomi手机</div>
<div class="sup-center">Redmi手机</div>
<div class="sup-center">电视</div>
<div class="sup-center">笔记本</div>
<div class="sup-center">平板</div>
<div class="sup-center">家电</div>
<div class="sup-center">路由器</div>
<div class="sup-center">服务中心</div>
<div class="sup-center">社区</div>
<div class="sup-right">
<div class="search-input">
<input type="text" class="search-input" id="search-input"></div>
</div>
</div>
<div class="bottom">
<div class="left">
<div class="sub-left">手机            ></div>
<div class="sub-left">电视            ></div>
<div class="sub-left">家电            ></div>
<div class="sub-left">笔记本 平板        ></div>
<div class="sub-left">出行 穿戴         ></div>
<div class="sub-left">耳机 音响         ></div>
<div class="sub-left">健康 儿童         ></div>
<div class="sub-left">生活 箱包         ></div>
<div class="sub-left">智能 路由器        ></div>
<div class="sub-left">电源 配件         ></div>
</div>
<div class="right">
<img src="../picture/xiyiji.webp" alt="" style="width:100%;height: auto;">
</div>
</div>
</div>
</body>
</html>
html
发布于2023-11-30著作权归作者所有