题目要求
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.goods{
width: 220px;
height: 360px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.goods:hover{
border: 1px solid #f40;
}
img{
width: 220px;
}
.price{
margin-left: 5px;
margin-right: 10px;
}
.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){
font-size: 12px;
background-color: #f40;
color: white;
padding-left:1px;
padding-right:1px;
}
.price > span:last-child{
float: right;
font-size: 12px;
color: #888;
}
#des{
margin-left: 10px;
margin-right: 5px;
}
#des>a{
color: #444;
font-size: 12px;
text-decoration: none;
}
#des>a:hover{
text-decoration: underline;
color: #f40;
}
#des span{
color: #F40;
}
.ders{
width: 13px;
height: 12px;
line-height: 22px;
float: left;
margin-left: 10px;
margin-top: 1px;
}
.der{
width: 8px;
height: 2px;
background: #f40;
float: left;
margin-top: 2px;
}
.sping{
font-size: 10px;
float: left;
color: #888;
text-decoration: underline;
}
.sping:hover{
color: #f40;
}
.text{
float: right;
font-size: 10px;
color: #888;
}
.bgtup{
background-image: url("https://img.alicdn.com/tps/i3/TB1bh5IMpXXXXacaXXXrG06ZpXX-316-272.png");
}
.one{
width: 49px;
height: 16px;
float: left;
background-position: -5px -113px;
}
.two{
width: 16px;
height: 16px;
float: left;
background-position: -213px -199px;
margin-left: 3px;
}
.three{
width: 26px;
height: 16px;
background-image: url("https://img.alicdn.com/tps/i2/TB1Z4WGMpXXXXbyaXXX6sGuHVXX-458-458.png");
float: right;
background-position: -435px -86px;
margin-right: 5px;
}
#tupian{
position: relative;
/* width: 220px;
height: 220px; */
}
.four{
height: 25px;
width: 220px;
position: absolute;
top: 194px;
display: none;
}
.four div{
height: 25px;
width: 109.5px;
background-color: rgba(255, 68, 0, 0.8);
color: white;
float: left;
}
.world{
margin-left: 28px;
}
#tupian:hover .four{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<div id="tupian">
<img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i3/862580190/O1CN01W6ZZ0D1DH43NWPuY6_!!0-saturn_solar.jpg_580x580Q90.jpg_.webp" alt="加载失败">
<div class="four">
<div style="border-right: 0.5px solid white;">
<span class="world">找同款</span>
</div>
<div style="">
<span class="world">找相似</span>
</div>
</div>
</div>
<div>
<div class="price">
<span>￥10.90</span>
<span>包邮</span>
<span>600+人付款</span>
</div>
<div id="des">
<a href="#">汇腾台式香肠热狗肠香辣鸡肉肠猪肉肠泡面搭档即食<span>零食</span>火腿肠42g</a>
</div>
<div style="margin-top: 10px;">
<div style="width: 205px; height: 22px;">
<a href="https://baidu.com">
<span class="ders">
<span class="der"></span>
<span class="der"></span>
<span class="der"></span>
</span>
<span class="sping">朱大哥食品专营店</span>
</a>
<div class="text">
湖南 岳阳
</div>
</div>
</div>
<div style="margin-left: 10px; margin-top: 10px;">
<div class="bgtup one"></div>
<div class="bgtup two"></div>
<div class="three"></div>
</div>
</div>
</div>
</div>
</body>
</html>
代码效果
