移动端流体布局[4]

2017年10月30日09:35:07 发表评论

本章主要开始如果通过第一个 PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局。

一.旅游图片部分

<div class="container">
<figure>
<img src="img/tour1.png" alt="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;曼谷-芭提雅 6 日游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;马尔代夫双鱼岛 Olhuveli4 晚 6 日自助游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;海南双飞 5 日游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;富山-大阪-东京 8 日游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;法瑞意德 12 日游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;巴厘岛 6 日半自助游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;塞舌尔迪拜 9 日自助游&gt;</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="移动端流体布局[4]" alt="">
<figcaption>
<h4>&lt;花样姐姐土耳其 9 日或 10 日游&gt;</h4>
<p>最高立减 3000!中餐六菜一汤</p>
<div class="info">
<em class="sat">满意度 93%</em>
<span class="price">¥ <strong>9999</strong> 起</span>
</div>
</figcaption>
</figure>
</div>
<div class="clearfix"></div>

//CSS 部分

//去掉边框计算

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 figure img {
    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 .price strong {
    letter-spacing: 0.01rem;
}
#tour .sat {
    color: #999;
    font-style: normal;
    float: right;
    position: relative;
    right: .05rem;
}

//媒体查询

/*媒体查询,大于 480px 小于 640px*/

@media (min-width: 480px) and (max-width: 640px) {
    #tour h2 {
        font-size: .26rem;
    }
    #tour h3, #footer, #tour figure, #tour .info {
        font-size: .16rem;
    }
}

/*媒体查询,小于 480px*/

@media (max-width: 480px) {
    #tour h2 {
        font-size: .20rem;
    }
#tour h3, #tour .info,#tour figure {
    font-size: .14rem;
    }
    #footer {
        font-size: .12rem;
    }
}

注:本章为第55课。本次教程共63节课(由大庆seo工程师整理发布),循序渐进地教您响应式网站的制作。1-13课时为html5内容,14-40课时为css3内容,41-51课时为pc端固定布局网站制作实例,52-57课时为移动端流体布局网站制作实例,58-63课时为响应式网站制作实例。最贴心的是每节课示例代码提供免费下载。小白从第一节课开始学起,将走向前端开发,特别是目前最为流行的响应式网站高手之路......

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: