主要代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城练习</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
display: inline-block;
text-decoration: none;
width: 90px;
height: 50px;
text-align: center;
line-height: 90px;
color: black;
}
b {
display: inline-block;
text-decoration: none;
width: 234px;
height: 42px;
text-align: center;
line-height: 50px;
color: white;
}
.header {
display: flex;
width: 1226px;
height: 100px;
}
.headerleft {
width: 236px;
height: 50px;
}
.headerright {
display: flex;
width: 996px;
height: 50px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background-color: white;
}
.goods {
display: flex;
width: 1226px;
height: 460px;
}
.goodsleft {
width: 230px;
height: 460px;
background-color: grey;
}
li {
width: 1200px;
height: 460px;
list-style: none;
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66eff8e22a48ded4854017b25cbf631.jpeg?thumb=1&w=1839&h=690&f=webp&q=90);
background-size: cover;
}
.right ul {
display: flex;
width: 990px;
height: 460px;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
</style>
</head>
<body>
<div class="header">
<div class="headerleft">
<img src="../代码/微信图片_20230710184448.png" width="70px" height="60px">
</div>
<div class="headeright">
<header>
<right>
<a href="#">Xiaomi手机</a>
<a href="#">Redmi手机</a>
<a href="#">电视</a>
<a href="#">笔记本</a>
<a href="#">平板</a>
<a href="#">家电</a>
<a href="#">路由器</a>
<a href="#">服务中心</a>
<a href="#">社区</a>
<a><input type="text" name="" id="" placeholder="显示器"></a>
</right>
</header>
</div>
</div>
<div class="goods">
<div class="goodsleft">
<b href="#">手机</b></br>
<b href="#">电视</b></br>
<b href="#">家电</b></br>
<b href="#">笔记本 平板</b></br>
<b href="#">出行 穿戴</b></br>
<b href="#">耳机 音箱</b></br>
<b href="#">健康 儿童</b></br>
<b href="#">生活箱包</b></br>
<b href="#">智能 路由器</b></br>
<b href="#">电源 配件</b></br>
</div>
<div class="right">
<ul>
<li>
<a href="#">
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
效果图