淘宝的三个界面
登录页面
<!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>
.a{
margin-top: 25px;
margin-left: 190px;
}
.box{
width: 885px;
height: 514px;
border-radius: 18px;
background-color:whitesmoke;
margin: auto;
margin-top: 60px;
border-radius: 18px;
}
.b,.c{
float: left;
border-radius: 18px;
}
.b{
width: 60%;
background-color:whitesmoke;
height: 514px;
float: left;
border-radius: 18px;
}
.c{
width: 40%;
background-color:whitesmoke;
height: 514px;
border-radius: 18px;
float: left;
position: relative;
left: 670px;
bottom: 180px;
}
.b11{
color: #ff6200;
font-family: PingFang SC;
padding: 0 20px;
height: 16px;
margin: 0;
font-size: 22px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0;
position: relative;
top: 80px;
left: 60px;
}
.b12{
font-family: PingFang SC;
padding: 0 20px;
height: 16px;
margin: 0;
font-size: 22px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0;
color: #11192d;
position: relative;
top:80px;
left: 80px;
}
.b2{
position: relative;
top: 120px;
left: 120px;
}
.b3{
position: relative;
top: 150px;
left: 120px;
}
button{ background-color: #ff6200;
position: relative;
top: 180px;
left: 120px;
width: 280px;
height: 35px;
border-radius: 8px;
border: 0px;
}
li{list-style: none;
display: inline-block;
border-right: 1px black;
}
.b5{
position: relative;
top: 200px;
left: 80px;
}
.c1{
position: relative;
top: 100px;
right: 10px;
}
</style>
</head>
<body>
<div class="a"><img src="./下载.png" alt="" style="width: 72px;height: 42px;"></div>
<div class="box">
<div class="b">
<span class="b11">密码登录</span> <span class="b12">短信登陆</span><br>
<div class="b2"><input type="text" placeholder="账号名/邮箱/手机号" style="border-color: #f1eeee;
border-radius: 8px;
font-family: PingFang SC;
font-size: 16px;
width: 280px;
height: 35px;
border: 0px;
"></div>
<div class="b3">
<input type="text" placeholder="请输入登录密码" style="border-color: #f1eeee;
border-radius: 8px;
font-family: PingFang SC;
font-size: 16px;
width: 280px;
height: 35px;
border: 0px;
"> </div>
<div class="b4">
<button type="submit">登录</button>
</div>
<div class="b5">
<ul>
<li><img src="./下载 (1).svg" alt="" style="width: 14px; height: 14px;">支付宝登录</li>
<li>免费注册|</li>
<li>忘记账号|</li>
<li>忘记密码</li>
</ul>
</div
</div>
<div class="c">
<div class="c1">
<span style="font-size: 22px;">手机扫码登录</span><br><br>
<img src="./微信截图_20240615183132.png" alt="" style="width: 176px;height: 176px; position: relative; right: 30px;" >
</div>
</div>
</div>
</body>
</html>
首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
.a>div{
background-color: aliceblue;
float: left;
width: 1190px;
height: 119px;}
.a2{
position: fixed;
top:30px;
left: 200px;
}
.a3{
position: fixed;
left: 820px;
top: 35px;
}
ul{
width:500px;
position: fixed;
left: 200px;
}
li{
width: 50px;
list-style: none;
display: inline-block;}
.box{
position: relative;
top: 90px;
}
.box{
display: grid;
grid-template-rows: repeat(1,1fr);
grid-template-columns: repeat(3,1fr);
height: 310px;
width: 1190px;
grid-gap: 5px;
}
.box>div:nth-child(1){
grid-column: 1/2;
background-color:whitesmoke;
width: 280px;
}
.box>div:nth-child(2){grid-column: 2/3;width: 610px;}
.box>div:nth-child(3){grid-column: 3/4;width: 240px;}
.b3{
margin: 0px;
/* border: 2px solid red; */
position: relative;
left: 200px;}
.c>body{
float: left;
height: 48px;
}
.c{
margin-top: 250px;
height: 60px;
width: 100%;
}
.c1{
height: 60px;
background-color: white;
width: 200px;
}
.z1{
position: relative;
bottom: 35px;
}
.z2{
font-size: 12px;
position: relative;
bottom: 30px;
left: 55px;
color: #ff5000!important;
}
/* 下面 */
.c1,.c2,.c3,.c4,.c5,.c6{
float: left;
margin: 5px;}
.c2{
height: 60px;
background-color:white;
width: 200px;
}
.z3{
color: #11192d;
font-size: 16px;
position: relative;
bottom: 30px;
}
.z4{
position: relative;
bottom: 30px;
left: 60px;
color: #7c889c;
font-size: 12px;
}
.c3{
height: 60px;
width: 200px;
background-color: white;
}
.z5{
color: #11192d;
font-size: 16px;
position: relative;
bottom: 30px;
}
.z6{
color: #7c889c;
font-size: 12px;
position: relative;
bottom: 10px;
right: 70px;
}
.c4{
height: 60px;
width: 200px;
background-color: white;
}
.z7{ color: #11192d;
font-size: 16px;
position: relative;
bottom: 30px;
}
.z8{
color: #7c889c;
font-size: 12px;
position: relative;
bottom: 10px;
right: 70px;
}
.c5{height: 60px;
width: 200px;
background-color: white;
}
.z9{color: #11192d;
font-size: 16px;
position: relative;
bottom: 30px;}
.z10{ color: #7c889c;
font-size: 12px;
position: relative;
bottom: 10px;
right: 70px;
}
</style>
</head>
<body><div class="a">
<div class="a1"><img src="https://img.alicdn.com/imgextra/i1/O1CN01BqHq2Z28Ns0s0KLHa_!!6000000007921-2-tps-126-54.png" alt="" style="text-align: center;">
<div class="a2"><input type="text" style="width: 690px; height: 37px; border-color: #FE6076;border-radius: 10px;"></div>
<div class="a3"><button type="submit" style="height: 34px; width: 73px;border-color: #FE6076; background-color: #FE6076;border-radius: 10px;">搜索</button></div>
<div class="a4">
<ul class="a41">
<li>聚划算</li>
<li>空调</li>
<li>笔记本</li>
<li>洗衣机</li>
<li>零食</li>
<li>球衣</li>
<li>游戏</li>
</ul>
</div>
<div class="box">
<div class="b1">
<table width="280px" height="200px" >
<tr>
<td rowspan="2"><img src="./女装内衣.png" alt=""style="width:20px; height:20px;">女人</td>
<td>连衣裙</td>
<td>凉鞋</td>
<td>拖鞋</td>
</tr>
<tr>
<td>高跟鞋</td>
<td>鞋子</td>
<td>长裙</td>
</tr>
<tr>
<td rowspan="2"><img src="./男装.png" alt=""style="width:20px; height:20px;">男人 </td>
<td>拖鞋</td>
<td>T恤</td>
<td>男鞋</td>
</tr>
<tr>
<td>单车</td>
<td>套装</td>
<td>头盔</td>
</tr>
<tr>
<td rowspan="2"><img src="./数码手机.png" alt=""style="width:20px; height:20px;">数码</td>
<td>耳机</td>
<td>冰箱</td>
<td>空调</td>
</tr>
<tr>
<td>饮水机</td>
<td>小白鞋</td>
<td>投影仪</td>
</tr>
<tr>
<td rowspan="2"><img src="./母婴玩具.png" alt=""style="width:20px; height:20px;">母婴</td>
<td>笔袋</td>
<td>卫衣</td>
<td>手套</td>
</tr>
<tr>
<td>益生菌</td>
<td>婴儿车</td>
<td>帽子</td>
</tr>
</table>
</div>
<div class="b2"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01nlPQ9s1y3aKUb5tDo_!!6000000006523-0-tps-800-450.jpg" alt="" ></div>
<div class="b3">
<!-- <div class="b31"><span style="color: #FE6076;">我的淘宝</span></div>
<div class="b32">
<div class="b321"><span style=" color: #c50a0a;font-size: 38px; width: 150px;" >天猫</span></div>
<div class="b322"><img src="https://img.alicdn.com/tfs/TB1HqQ.iEH1gK0jSZSyXXXtlpXa-228-126.gif" alt="" style="width: 199px;height: 61px; margin-left: 60px"></div>
</div>
<div class="b33">
<div class="b331"><img src="https://img.alicdn.com/tfs/TB19mNXiO_1gK0jSZFqXXcpaXXa-228-126.gif" alt="" style="width: 199px;height: 61px;margin-bottom: 10px; float: left;;"> </div>
<div class="b332"> <img src="https://img.alicdn.com/imgextra/i1/O1CN01ri8MCJ1wodmFXLMWC_!!6000000006355-2-tps-238-122.png" alt="" style="width: 199px;height: 61px;margin-left: 50px;float: left;;"></div>
</div>
<div class="b34">
<div class="b341"> <span style=" color: #c50a0a;font-size: 38px; width: 150px;">九块九</span></div>
<div class="b342"><img src="https://gw.alicdn.com/imgextra/i2/O1CN01fxERSz1lLp5Jqzmv1_!!6000000004803-2-tps-238-120.png" alt="" style="width: 199px;height: 61px;margin-top: 20px;margin-left: 80px;"> </div> -->
<table width="240px" height="280px" ">
<tr>
<td colspan="2"><span style=" font-size: 38px; color: #FE6076;">我的淘宝</span></td>
<!-- <td></td> -->
</tr>
<tr>
<td><span style=" font-size: 38px; color: #FE6076;">天猫</span></td>
<td><img src="https://img.alicdn.com/tfs/TB1HqQ.iEH1gK0jSZSyXXXtlpXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
</tr>
<tr>
<td><img src="https://img.alicdn.com/tfs/TB19mNXiO_1gK0jSZFqXXcpaXXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
<td><img src="https://img.alicdn.com/imgextra/i1/O1CN01ri8MCJ1wodmFXLMWC_!!6000000006355-2-tps-238-122.png" alt="" style="width: 119px;height: 61px;"></td>
</tr>
<tr>
<td><span style=" font-size: 38px; color: #FE6076;">九块九</span></td>
<td><img src="https://gw.alicdn.com/imgextra/i2/O1CN01fxERSz1lLp5Jqzmv1_!!6000000004803-2-tps-238-120.png" alt="" style="width: 119px;height: 61px;"></td>
</tr>
<tr>
<td><img src="https://img.alicdn.com/tfs/TB1zFU_ipT7gK0jSZFpXXaTkpXa-228-126.gif" alt="" style="width: 119px;height: 61px;"></td>
<td><img src="https://ossgw.alicdn.com/alp/1578762297268-200-107.png" alt="" style="width: 119px;height: 61px;"></td>
</tr>
</table>
</div>
</div>
<div class="c">
<div class="c1"><img src="https://gw.alicdn.com/imgextra/i2/O1CN011E0R1J23w9lJDeJXk_!!6000000007319-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);"><span class="z1" style="color: #ff5000;font-size: 16px;">猜你喜欢</span>
<br><span class="z2" style="font-size: 12px;">精选好物推荐</span>
</div>
<div class="c2"><img src="https://img.alicdn.com/imgextra/i4/O1CN01O363PQ23L3gUtAlg5_!!6000000007238-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);"><span class="z3">潮店数码</span><br>
<span class="z4">疯强8.5折起</span>
</div>
<div class="c3"><img src="https://img.alicdn.com/imgextra/i3/O1CN01wCKde31iiJrvWtIbb_!!6000000004446-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
<span class="z5">服饰时尚</span>
<span class="z6">大牌直降</span>
</div>
<div class="c4"><img src="https://gw.alicdn.com/imgextra/i4/O1CN01HcFWbP25zTrvtEkbS_!!6000000007597-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
<span class="z7">运动户外</span>
<span class="z8">满300减50</span>
</div>
<div class="c5"><img src="https://img.alicdn.com/imgextra/i1/O1CN01OrnNZw1QLjFUWKGmc_!!6000000001960-2-tps-192-192.png" alt="" style="width: 60px;height: 60px;border-radius: 100%;background-color: rgb(241, 233, 229);">
<span class="z9">精致护理</span>
<span class="z10">满十减一</span>
</div>
</div>
</div>
</body>
</html>
商品展示页面
<!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>
.a{
position:relative;
bottom: 50px;
}
.b{
background-color: #f03726;
font-size: 18px;
position: absolute;
top: 10px;
left: 997px;
}
.dh{
width: 60px;
height: 24px;
list-style: none;
display: inline-block;
font-size: 14px;
color: #50607A;
}
.c{
position: relative;
bottom:65px ;
left: 300px;
}
.box{
width: 1200px;
height: 800px;
margin: auto;
}
li{
list-style-type: none;
display: inline-block;
border: #f03726 1px;
margin-right: 4px;
}
.pro-introduce{
display: inline-block;
font-size: 13px;
font-weight: 500;
width: 200px;
height: 40px;
margin-left: 8px;
margin-right: 8px;
}
.pro-sale{
position: relative;
left: 120px;
}
</style>
</head>
<body>
<div class="head"><img src="https://img.alicdn.com/tfs/TB1R5fsgyDsXe8jSZR0XXXK6FXa-281-80.jpg" alt="">
<input type="text" class="a" style="width: 697px;height: 39px;border-color: #f03726;">
<button class="b" type="submit" style="width: 95px;height: 40px;border-color: #f03726;">搜索</button>
<div class="c"><ul>
<li class="dh">苹果</li>
<li class="dh">芬迪</li>
<li class="dh">零食</li>
<li class="dh">床垫</li>
<li class="dh">电脑</li>
<li class="dh">手机</li>
<li class="dh">可乐</li>
<li class="dh">鼠标垫</li>
</ul>
</div>
<div class="box">
<ul>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li> <li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
<li>
<a href="">
<div class="pro-img"><img src="https://img.alicdn.com/imgextra/i2/2086030006/O1CN01s6CrAd1BunKEmxxpu_!!0-saturn_solar.jpg_360x360xzq75.jpg_.webp" alt=""
style=" height: 200px; width: 194px;"></div>
<div class="pro-introduce"><span>内蒙古牛肉干特产零食手撕牛肉干五香原味牛肉粒香辣味休闲食品</span></div>
<div class="pro-price"><span style="color: #fd3f31;font-size: 18px;">¥8.8</span></div>
<div class="pro-boss"><span><img src="./微信截图_20240617115948.png" alt="">遥遥零食小卖部</span></div>
<div class="pro-sale"><span style="font-size: 12px;">月销33</span></div>
</a>
</li>
</ul>
</div>
</body>
</html>