<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document1</title>
<style>
a {
color: #333;
text-decoration: none;
}
.box {
width: 360px;
border: 1px solid #ddd;
position: relative;
padding: 15px;
box-sizing: border-box;
}
.box a:hover .title {
color: #339999;
text-decoration: underline;
}
.box a:active .title {
font-size: 30px;
text-decoration: underline;
}
.box a:focus .title {
color: pink;
}
.top_up {
position:absolute;
left: 0;
top: 0;
}
.adimg {
width: 100%;
}
.title {
color: #3e3e3e;
font-size: 15px;
}
.shopinfo {
position: relative;
height: 100px;
}
.price {
position: absolute;
color: rgb(221, 93, 34);
font-size: 36px;
font-weight: bold;
top: 20px;
}
.priceold {
position: absolute;
top: 42px;
left: 118px;
color: #888;
font-size: 14px;
}
.view {
position: absolute;
right: 0;
top: 20px;
}
.buycount {
position: absolute;
right: 0;
top: 52px;
font-size: 13px;
}
.buycount i {
color: red;
font-style: normal;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<img class="top_up" src="./images/top_tu.gif" alt="">
<img class="adimg" src="./images/adv.jpg" alt="">
<p class="title">【12店通用】领航冰品哈根达斯：冰淇淋双球，口味任选2种，节假通用
超链接效果设置</p>
<div class="shopinfo">
<span class="price">￥20.8</span>
<span class="priceold">原价￥38</span>
<img class="view" src="./images/see.jpg" alt="">
<span class="buycount"><i>32</i>人已购买</span>
</div>
</a>
</div>
</body>
</html>