效果图：
代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>仿淘宝</title>
<style>
.goods {
width: 220px;
height: 360px;
border: 1px solid #EDEDED;
}
.goods:hover {
border-color: #f40;
}
.img_1 {
width: 220px;
height: 220px;
background-size: 220px 220px;
background-image: url("img/鸡哥卫衣图片.png");
position: relative;
}
.img_1:hover>.block_1,.img_1:hover>.block_2 {
display: block;
}
.block_1 {
display: inline-block;
width: 109px;
height: 30px;
background-color: #FF4400;
margin-top: 190px;
text-align: center;
line-height: 30px;
font-size: 15px;
border-right: 1px solid white;
position: absolute;
display: none;
}
.block_2 {
display: inline-block;
width: 110px;
height: 30px;
background-color: #FF4400;
margin-left: 110px;
margin-top: 190px;
text-align: center;
line-height: 30px;
font-size: 15px;
position: absolute;
display: none;
}
.block_1>a,.block_2>a {
color: white;
text-decoration: none;
}
.price {
margin-top: 4px;
padding: 0px 10px 0px;
}
.price>span {
line-height: 22px;
vertical-align: middle;
}
.price>span:first-child {
color: #f40;
font-size: 16px;
font-weight: bold;
}
.price>span:nth-child(2) {
font-size: 10px;
background-color: #f40;
color: white;
padding-left: 1px;
padding-right: 1px;
}
.price>span:last-child {
float: right;
font-size: 12px;
color: #888;
}
#des {
margin-top: 5px;
padding: 0px 10px 0px;
}
#des>a {
color: #444;
font-size: 12px;
text-decoration: none;
}
#des>a:hover {
text-decoration: underline;
color: #f40;
}
.text {
margin-top: 5px;
padding: 0px 10px 0px;
/* border: 1px solid navy; */
}
.text_left {
display: inline-block;
margin-top: 6px;
padding: 0px;
width: 13px;
height: 12px;
/* border: 1px solid red; */
float: left;
}
.text_left>.wire {
display: inline-block;
margin-top: 2px;
padding: 0px;
width: 8px;
height: 2px;
background-color: #FF4400;
float: left;
}
.font_1 {
font-size: 12px;
padding: 0px;
/* border: 1px solid green; */
}
.address {
color: #888888;
font-size: 12px;
line-height: 23px;
float: right;
/* border: 1px solid green; */
}
.text>a:link {
color: #888888;
}
.text>a:visited {
color: #888888;
}
.text>a:hover {
color: #FF4400;
}
.box {
height: 18px;
/* border: 1px solid red; */
margin-top: 10px;
padding: 0px 10px 0px;
}
.box>.picture_left_1 {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('./img/淘宝精灵图左下角.png');
background-position: 103px 73px;
/* border: 1px solid black; */
line-height: 20px;
}
.box>.picture_left_2 {
display: inline-block;
width: 16px;
height: 16px;
background-image: url('./img/淘宝精灵图左下角.png');
background-position: 21px 111px;
/* border: 1px solid black; */
}
.box>.picture_right_1 {
display: inline-block;
width: 18px;
height: 18px;
background-image: url('./img/淘宝精灵图右下角.png');
background-position: 24px 373px;
float: right;
/* border: 1px solid black; */
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<div class="img_1">
<span class="block_1"><a href="#">找同款</a></span>
<span class="block_2"><a href="#">找相似</a></span>
</div>
<div class="price">
<span>￥34.56</span>
<span>包邮</span>
<span>1亿+人付款</span>
</div>
<div id="des">
<a href="#">我家坤坤同款卫衣，穿上唱跳篮球rap属性拉满</a>
</div>
<div class="text">
<a href="#">
<span class="text_left">
<span class="wire"></span>
<span class="wire"></span>
<span class="wire"></span>
</span>
<span class="font_1">
鸡哥旗舰店
</span>
</a>
<span class="address">
广东 广州
</span>
</div>
<div class="box">
<div class="picture_left_1"></div>
<div class="picture_left_2"></div>
<div class="picture_right_1"></div>
</div>
</div>
</div>
</body>
</html>
