<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿淘宝</title>
<style>
.good {
border: 1px solid red;
width: 220px;
height: 360px;
}
.pic {
width: 220px;
height: 220px;
position: relative;
}
.pic>img {
width: 220px;
height: 220px;
}
.find>div {
width: 110px;
background-color: #f40;
color: white;
text-align: center;
float: left;
}
.find>div:first-child {
width: 109px;
border-right: 1px solid white;
}
.find {
position: absolute;
bottom: 0px;
display: none;
}
.good:hover .find {
display: block;
}
.find a {
color: white;
text-decoration: none;
}
.price,
.des,
.shopinfo,
.icon {
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
}
.price>span {
line-height: 20px;
vertical-align: middle;
}
.price>span:first-child {
color: #f40;
font-size: 20px;
font-weight: bold;
}
.price>span:nth-child(2) {
background-color: #f40;
color: white;
font-size: 14px;
}
.price>span:last-child {
color: #777;
font-size: 14px;
float: right;
}
.des>a {
color: #333;
font-size: 14px;
text-decoration: none;
}
.des>a:hover {
color: #f40;
text-decoration: underline;
}
.shopinfo>a:first-child,
.shopinfo>span {
color: #333;
font-size: 14px;
}
.shopinfo>span {
float: right;
}
.icon>span:first-child {
background-image: url("https://img.alicdn.com/imgextra/i1/O1CN01QuhUWL1xJKJw0hnvG_!!6000000006422-2-tps-62-32.png");
width: 31px;
height: 16px;
background-size: cover;
display: inline-block;
}
.icon>span:nth-child(2) {
display: inline-block;
width: 49px;
height: 16px;
border: 1px solid rebeccapurple;
background-size: 308px 298px;
background-position: -5px -113px;
background-image: url("https://img.alicdn.com/tps/i3/TB1h9GMMpXXXXcSXVXXRJo3QFXX-616-596.png");
}
.icon>span:last-child {
display: inline-block;
float:right;
background-size: 430px 426px;
background-position: -172px -323px;
width: 16px;
height: 16px;
background-image: url("https://img.alicdn.com/tps/i1/TB1D4e7MpXXXXbpXpXX8jvl4XXX-860-852.png");
}
.good{
float:left;
margin-left:10px;
margin-top:10px;
}
p{
clear:both;
}
</style>
</head>
<body>
<div class="container">
<div class="good">
<div class="pic">
<img src="./TP/猫猫.jpg" alt="">
<div class="find">
<div><a href="#">找同款</a></div>
<div><a href="#">找相似</a></div>
</div>
</div>
<div class="price">
<span>¥999.00</span>
<span>包邮</span>
<span>10万+人已购买</span>
</div>
<div class="des">
<a href="#">金渐层幼猫纯种英短银渐层猫幼崽猫咪短毛宠物猫</a>
</div>
<div class="shopinfo">
<a href="#">喵喵旗舰店</a>
<span>四川 成都</span>
</div>
<div class="icon">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>