<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>携程tab</title>
<style type="text/css">
.img{
height: 110px;
width: 220px;
position: relative;
overflow: hidden;
}
.img img{
width: 220px;
}
.message{
background: url(http://pic.c-ctrip.com/platform/online/home/un_sprite_tag.png);
position: absolute;
top: 0;
left: 20px;
height: 41px;
width: 41px;
text-align: center;
color: white;
font-size: 14px;
padding-top: 5px;
/*overflow: hidden;*/
box-sizing: border-box;
}
.sell{
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.5);
color: white;
width:100%;
font-size: 14px;
height: 30px;
line-height: 30px;
}
.area{
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
}
.img:hover img{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="img">
<img src="https://dimg03.c-ctrip.com/images/100s0800000033z714C56_C_500_280.jpg" />
<span class="message">特卖</span>
<div class="sell">超正航班，超级特卖</div>
</div>
<div class="area" title="巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店">巴厘岛5-6日4晚自由行(5钻)·库塔海滩零距离 五星万豪/喜来登 人气酒店 </div>
</body>
</html>