[06]项目实战-移动端流体布局

一．导航固定

由于移动设备屏幕高度较低，没有滚动条操作的便利性。一般来说，栏目的导航部分总

是固定在移动设备的某一个方位。我们这里将头部的导航永远固定在头部，不会随着页面向

下滑动而更改。

//固顶定位
#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="">
<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;
}
}