仿淘宝网站
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝</title>
<style>
.shop_top{
width: 1000px;
height: 50px;
color: red;
}
.shop_top img{
width: 50px;
height: 50px;
margin-right: 10px;
}
.box{
width: 1000px;
/* margin: auto; */
}
.prod{
width: 240px;
height: 240px;
list-style: none;
border: 1px solid #f2f2f2;
display: inline-block;
line-height: 1.6;
}
.prod:hover{
border-color: red;
}
.prod-img{
text-align: center;
}
.prod-price{
color: red;
}
.prod-boss{
color: black;
}
.prod-sale{
color: black;
border-top: 1px solid #f2f2f2;
text-align: right;
padding-top: 10px;
}
.prod-test-box{
width: 240px;
height: 240px;
margin: auto;
border: 1px solid blue;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="shop_top">
<a href="https://www.taobao.com/">淘宝</a>
</div>
<div class="box">
<ul class="prods">
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21n57.1.item.11.5d26523c9owOq4&priceTId=2150430c17218854439248077e70a0&utparam=%7B%22aplus_abtest%22:%2221351dbe9a57c957ef106cab93a218cc%22%7D&id=811620244581&ns=1&abbucket=8&sku_properties=1627207:28341;5919063:6536025">
<div class="prod-test-box">
<div class="prod-img">
<img class="prod-img" width="240px" height="240px" src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/2217339846064/O1CN01HxckCw1ufMiDKrxwt_!!2217339846064.jpg_360x360q90.jpg_.webp" alt="">
</div>
<div class="prod-introduce">
<span class>
<span style="color: rgb(255,98,0);">数码</span>
"相机"
</span>
</div>
<div class="prod-price">￥5699.00</div>
<div class="prod-boss">新品数码</div>
<div class="prod-sale">两人付款</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://detail.tmall.com/item.htm?spm=a21n57.1.item.7.61ce523c5Pl3k9&priceTId=2150430c17218853247326865e70a0&utparam=%7B%22aplus_abtest%22:%228151170599f64d29fc4c2855b4aa9da9%22%7D&id=773403279740&ns=1&abbucket=8&xxc=taobaoSearch&sku_properties=10004:7195672376;5919063:6536025;122216431:27772">
<div class="prod-test-box">
<div class="prod-img">
<img class="prod-img" width="240px" height="240px" src="https://g-search2.alicdn.com/img/bao/uploaded/i4/i2/1114511827/O1CN014cX0xK1PMoa7U6GOE_!!0-item_pic.jpg_360x360q90.jpg_.webp" alt="">
</div>
<div class="prod-introduce">
<span class>
"【官网】HONOR/荣耀Magic6 至臻版"
<span style="color: rgb(255,98,0);">手机</span>
"5G单反级超动态鹰眼相机/荣耀金刚巨犀玻璃官方旗舰店智能"
<span style="color: rgb(255,98,0);">手机</span>
"AI"
</span>
</div>
<div class="prod-price">￥6699.00</div>
<div class="prod-boss">荣耀官方旗舰店</div>
<div class="prod-sale">100+人付款</div>
</div>
</a>
</li>
<li class="prod">
<a class="prod-href" href="https://item.taobao.com/item.htm?spm=a21n57.1.item.13.5537523cYQdACU&priceTId=2150430c17218854486268338e70a0&utparam=%7B%22aplus_abtest%22:%227ee3e8d3e2e9a9745dfcd56a4f0196ba%22%7D&id=765749833614&ns=1&abbucket=8">
<div class="prod-test-box">
<div class="prod-img">
<img class="prod-img" width="240px" height="240px" src="https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/2217261955336/O1CN01T2gsKi1pHwKT0ZfAq_!!2217261955336.jpg_360x360q90.jpg_.webp" alt="">
</div>
<div class="prod-introduce">
<span class>联想拯救者Y7000P 游戏电竞娱乐影音笔记本
</span>
</div>
<div class="prod-price">￥8999.00</div>
<div class="prod-boss">拯救者电子商城</div>
<div class="prod-sale">1000+人付款</div>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
