一.旅游图片部分
//HTML 部分
<figure>
<img src="img/tour1.png" alt="" />
<figcaption>
<h4><曼谷-芭提雅 6 日游></h4>
<p>包团特惠,超丰富景点</p>
<div class="info">
<em class="sat">满意度 77%</em>
<span class="price">¥ <strong>2864</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour2.png" alt="" />
<figcaption>
<h4><马尔代夫双鱼岛 Olhuveli4 晚 6 日自助游></h4>
<p>上海出发,机+酒 包含:早晚餐+快艇</p>
<div class="info">
<em class="sat">满意度 97%</em>
<span class="price">¥ <strong>8039</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour3.png" alt="">
<figcaption>
<h4><海南双飞5 日游></h4>
<p>含盐城接送,全程挂牌四星酒店</p>
<div class="info">
<em class="sat">满意度90%</em>
<span class="price">¥ <strong>2709</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour4.png" alt="">
<figcaption>
<h4><富山-大阪-东京8 日游></h4>
<p>暑期亲子,2 天自由,无导游安排</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9499</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour5.png" alt="">
<figcaption>
<h4><法瑞意德12 日游></h4>
<p>4 至5 星,金色列车,少女峰</p>
<div class="info">
<em class="sat">满意度97%</em>
<span class="price">¥ <strong>9199</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour6.png" alt="">
<figcaption>
<h4><巴厘岛6 日半自助游></h4>
<p>蓝梦出海,独栋别墅,悦榕庄下午茶</p>
<div class="info">
<em class="sat">满意度95%</em>
<span class="price">¥ <strong>6488</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour7.png" alt="">
<figcaption>
<h4><塞舌尔迪拜9 日自助游></h4>
<p>一游两国,4 晚塞舌尔,2 晚迪拜</p>
<div class="info">
<em class="sat">满意度100%</em>
<span class="price">¥ <strong>9669</strong> 起</span>
</div>
</figcaption>
</figure>
<figure>
<img src="img/tour8.png" alt="">
<figcaption>
<h4><花样姐姐土耳其9 日或10 日游></h4>
<p>最高立减3000!中餐六菜一汤</p>
<div class="info">
<em class="sat">满意度93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
</figcaption>
</figure>
<div class="clearfix"></div>
div,figure,figcaption {
box-sizing: border-box;
}
#tour figure{
width: 50%;
float: left;
background-color: #eee;
margin: 0 0 .05rem 0;
font-size: .16rem;
}
#tour figureimg {
padding: .02rem;
vertical-align: middle;
border-radius: .04rem;
}
#tour figcaption {
color: #666;
padding: .02rem .05rem;
}
#tour figcaption h4 {
display: block;
font-weight:normal;
padding: .05px 0;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#tour figcaption p {
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
#tour .info {
padding: .1rem 0 0 0;
font-size: .16rem;
}
#tour .price{
color: #f60;
}
#tour .pricestrong {
letter-spacing: 0.01rem;
}
#tour .sat {
color: #999;
font-style: normal;
float: right;
position: relative;
right: .05rem;
}
@media (min-width: 480px)and (max-width: 640px) {
#tour h2 {
font-size: .26rem;
}
#tour h3, #footer, #tour figure, #tour .info {
font-size: .16rem;
}
}
@media (max-width: 480px){
#tour h2 {
font-size: .20rem;
}
#tour h3, #tour .info,#tour figure {
font-size: .14rem;
}
#footer {
font-size: .12rem;
}
}