效果：
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>团购</title>
<style>
.biankuang{
width:300px;
height:350px;
border:2px solid rgba(128, 128, 128, 0.726);
}
img{
height:200px;
width: 280px;
position: relative;
top: 10px;
left: 10px;
}
.see{
height: 30px;
width:70px;
position: relation;
left: 140px;
top:-10px;
}
.txt{
font-size: 14px;
font-weight: 600;
width:280px;
position: relative;
top: 20px;
left: 10px;
}
.p1{
float:left;
color:red;
font-size: 25px;
font-weight: 900;
}
.p2{
position:relative;
top:30px;
left:10px;
font-size:8px;
font-weight: 200;
color:rgb(121, 121, 121)
}
.line1{
position:relative;
font-size: 8px;
top: 20px;
}
.line2{
position:relative;
font-size: 1px;
top: 5px;
left:150px;
}
.q1{
float:left;
color:red;
}
.q2{
float:left;
color:black;
}
.xin{
position:fixed;
height: 60px;
width: 60px;
z-index: 1;
}
</style>
</head>
<body >
<img src="images\top_tu.gif" class="xin">
<div class="biankuang">
<img src="images\adv.jpg" >
<div class="txt">
【12店通用】领航冰品哈根达斯：冰淇淋双<br>球，口味任选2种，节假通用
</div>
<span class="line1">
<p class="p1">￥20.8</p>
<p class="p2"> 原价￥38</p>
<img src="images\see.jpg" class="see">
</span>
<div class="line2">
<div class="q1">32</div>
<div class="q2">人已购买</div>
</div>
</div>
</body>
</html>
