移动端流体布局[5]

2017年10月31日07:00:41 发表评论

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

一.导航固定

由于移动设备屏幕高度较低,没有滚动条操作的便利性。一般来说,栏目的导航部分总是固定在移动设备的某一个方位。 我们这里将头部的导航永远固定在头部, 不会随着页面向下滑动而更改。

//固顶定位

#header {
    position: fixed;
    top: 0;
    z-index: 9999;
}

//相应的向下便宜 45px

#adver {
    padding: .45rem 0 0 0;
}

二.三个栏目

和固定布局一样,栏目都有一个图片背景以及大小标题。

//HTML 部分

<div id="headline">
    <img src="img/headline.png" alt="移动端流体布局[5]" alt="">
    <hgroup>
        <h2>旅游资讯</h2>
        <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
    </hgroup>
</div>
<hgroup>
    <h2>票务订购</h2>
    <h3>各种飞机票、火车票、汽车票和轮渡票的订购服务</h3>
</hgroup>
<hgroup>
    <h2>公司简介</h2>
    <h3>公司的发展历程、获得荣誉以及联系方式</h3>
</hgroup>

//CSS

#headline {
    max-width: 6.4rem;
    margin: 0 auto;
    padding: 0.45rem 0 0 0;
    position: relative;
}
#headline hgroup {
    position: absolute;
    top: 50%;
    left: 10%;
}
#headline h2 {
    color: #eee;
    letter-spacing: 0.01rem;
    font-size: .22rem;
}
#headline h3 {
    color: #eee;
    letter-spacing: 0.01rem;
    font-size: .14rem;
}

三.公司简介

这个栏目最简单,我们最优先完成。

//html

<div class="list about">
<section>
<h2>关于我们</h2>
<p>瓢城旅行社旅游网创立于 2006 年 10 月,以“让旅游更简单”为使命,为消费者提供由北京、上海、广州、深圳等 64 个城市出发的旅游产品预订服务,产品全面,价格透明,全年 365 天 24 小时 400 电话预订,并提供丰富的后续服务和保障。</p>
<p>目前, 瓢城旅行社旅游网提供 8 万余种旅游产品供消费者选择, 涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等,已成功服务累计超过 400 万人次出游。</p>
<p>同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区,可以更好地帮助游客了解目的地信息,妥善制定好出游计划,并方便地预订旅程中的服务项目。
</p>
</section>
<section>
<h2>联系我们</h2>
<address>
<ul>
<li>瓢城旅行社股份有限公司</li>
<li>地址:江苏省盐城市亭湖区大庆中路 1234 号</li>
<li>邮编:1234567</li>
<li>电话:010-88888888</li>
<li>传真:010-88666666</li>
</ul>
</address>
</section>
</div>

//CSS

.list {
    max-width: 6.4rem;
    margin: .15rem auto;
    font-size: .16rem;
    padding: 0 .1rem;
    color: #666;
}
.list h2 {
    font-size: .20rem;
    border-bottom: 1px dashed #999;
    padding: 0 0 .15rem 0;
}
.about p {
    line-height: 2;
    margin: .2rem 0;
}
.about address {
    font-style: normal;
    margin: .2rem 0;
    line-height: 1.6;
}

//响应式部分

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

@media (min-width: 480px) and (max-width: 640px) {
    #tour h3, #footer, #tour figcaption, #tour .info,.list {
        font-size: .16rem;
    }
    #headline h2 {
        font-size: .22rem;
    }
    #headline h3 {
        font-size: .14rem;
    }
.list h2 {
    font-size: .20rem;
    }
}

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

@media (max-width: 480px) {
    #tour h3, #tour figcaption, #tour .info,.list {
        font-size: .14rem;
    }
    #headline h2 {
        font-size: .18rem;
    }
    #headline h3 {
        font-size: .12rem;
    }
.list h2 {
    font-size: .17rem;
    }
}

注:本章为第56课。本次教程共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: