<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ彩貝熱銷時裝</title>
<style type="text/css">
p{
font-size: 12px;
line-height: 36px;
margin-left: 20px;
}
span{
font-weight: bold;
color: gray;
font-size: 14px;
}
img:hover{
transform: translate(-12px,0);
transition: all 1s ease-out;
}
#first{
border: 1px solid gainsboro;
position: absolute;
left: 50px;
top: 20px;
width: 226px;
height: 286px;
}
#second{
border-top: 1px solid gainsboro;
border-bottom: 1px solid gainsboro;
position: absolute;
left: 276px;
top: 20px;
width: 230px;
height: 143px;
}
#third{
border: 1px solid gainsboro;
position: absolute;
left: 506px;
top: 20px;
width: 230px;
height: 143px;
}
#fourth{
border-bottom: 1px solid gainsboro;
position: absolute;
left: 276px;
top: 164px;
width: 230px;
height: 143px;
}
#fifth{
border: 1px solid gainsboro;
position: absolute;
left: 506px;
top: 164px;
width: 230px;
height: 143px;
}
#first img{
position: absolute;
bottom: 38px;
right: 20px;
}
#second img{
position: absolute;
bottom: 15px;
right: 0;
}
#third img{
position: absolute;
bottom: 20px;
right: 5px;
}
#fourth img{
position: absolute;
bottom: 5px;
right: 10px;
}
#fifth img{
position: absolute;
bottom: 5px;
right: 0;
}
</style>
</head>
<body>
<div id="first">
<p><span>超級信用卡</span><br/>線上線下課累計彩貝積分</p>
<img src="4/1.bmp"/>
</div>
<div id="second">
<p><span>彩貝搶霸</span><br/>每天10點更新</p>
<img src="4/2.bmp"/>
</div>
<div id="third">
<p><span> 熱門優惠劵</span><br/>全場免費領取</p>
<img src="4/3.bmp"/>
</div>
<div id="fourth">
<p><span>促銷活動</span><br/>匯集全網優惠</p>
<img src="4/4.bmp"/>
</div>
<div id="fifth">
<p><span>精挑細選</span><br/>給你最好的選擇</p>
<img src="4/5.bmp"/>
</div>
</body>
</html>
QQ彩貝熱銷時裝
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。