运行效果:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝购物页</title>
<style>
.goods{
width: 220px;
height: 360px;
border: 1px solid #fff;
position: relative;
}
.price{
margin-left: 5px;
margin-right: 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){
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: 5px;
margin-right: 5px;
}
.des>a{
color: #444;
font-size: 12px;
text-decoration: none;
}
.des>a:hover{
text-decoration: underline;
color: #f40;
}
.tongshi{
width: 220px;
color: white;
background-color: #f40;
text-align: center;
display: none;
position: absolute;
}
.goods :hover .tongshi{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="goods">
<img src="D:/Download/1.jfif"/>
<div class="tongshi">找同款|找相似</div>
<div class="price">
<span>￥34.1元</span>
<span>包邮</span>
<span>1万+人购买</span>
</div>
<div class="des">
<a href="#">今天开始我要自己上厕所</a>
</div>
</div>
</div>
</body>
</html>