小米布局大概
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.da {
display: flex;
width: 1200px;
height: 600px;
border: 1px solid #111;
}
.zhuo{
width: 300px;
height: 600px;
background-color: rgb(212, 217, 218);
}
.yiu ul{
display: flex;
flex-wrap: wrap;
width: 900px;
height: 600px;
background-color: rgb(244, 237, 227);
justify-content: space-between;
align-content: space-between;
}
ul li {
list-style: none;
width: 210px;
height: 260px;
background-color: aliceblue;
}
</style>
</head>
<body>
<body>
<div class="da">
<div class="zhuo"><a href="#"></a></div>
<div class="yiu">
<ul>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
</div>
</div>
</body>
</body>
</html>
小米商城页面样板：（写不出来啊，不会）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.shang {
display: flex;
width: 1400px;
height: 73px;
background-color: rgb(62, 29, 29);
border: 1px solid rgb(252, 252, 252);
}
.tubiao{
width: 250px;
height: 73px;
background-color: blue;
}
.lx ul {
display: flex;
flex-wrap: wrap;
width: 750px;
height: 70px;
background-color: aqua;
justify-content: space-between;
align-content: space-between;
}
ul li {
text-align: center;
line-height: 73px;
font-size: 10px;
list-style: none;
width: 80px;
height: 73px;
background-color: blueviolet;
}
.zhuo {
}
</style>
</head>
<body>
<div class="shang">
<div class="tubiao"><img src="./小米图标2023-07-25 193611.png" alt=""><div>
<div class="lx">
<ul>
<li>Xiaomi手机</li>
<li>redmi手机</li>
<li>电视</li>
<li>笔记本</li>
<li>平板</li>
<li>家电</li>
<li>路由器</li>
<li>服务中心</li>
<li>社区</li>
</ul>
<div><input type="text" placeholder="搜索"></div>
</div>
</div>
<div class="xia">
<div class="zhuo"></div>
<ul>
<li>手机</li>
<li>电视</li>
<li>家电</li>
<li>笔记本 平板</li>
<li>出行 穿戴</li>
<li>耳机 音箱</li>
<li>健康儿童</li>
<li>生活箱包</li>
<li>智能路由器</li>
<li>电源配件</li>
</ul>
<div class="yiu"><img src="./2023-07-25 191956.png" alt=""></div>
</div>
</body>
</html>
955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
