首页 > 代码库 > 第32 章项目实战-移动端流体布局5
第32 章项目实战-移动端流体布局5
第32 章项目实战-移动端流体布局[5]学习要点：1.导航固顶2.三个栏目3.公司简介本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．导航固定由于移动设备屏幕高度较低，没有滚动条操作的便利性。一般来说，栏目的导航部分总是固定在移动设备的某一个方位。我们这里将头部的导航永远固定在头部，不会随着页面向下滑动而更改。//固顶定位#header {position: fixed;top: 0;z-index: 9999;}//相应的向下便宜45px#adver {padding: .45rem 0 0 0;}三．三个栏目和固定布局一样，栏目都有一个图片背景以及大小标题。//HTML 部分
瓢城旅行社-移动端 <link rel="stylesheet" href="http://www.mamicode.com/css/style.css"><body>
旅游资讯
介绍各种最新旅游信息、资讯要闻、景点攻略等
票务订购
各种飞机票、火车票、汽车票和轮渡票的订购服务
公司简介
公司的发展历程、获得荣誉以及联系方式
//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关于我们
瓢城旅行社旅游网创立于2006 年10 月，以“让旅游更简单”为使命，为消费者提供由北京、上海、广州、深圳等64 个城市出发的旅游产品预订服务，产品全面，价格透明，全年365 天24 小时400 电话预订，并提供丰富的后续服务和保障。
目前，瓢城旅行社旅游网提供8 万余种旅游产品供消费者选择，涵盖跟团、自助、自驾、邮轮、酒店、签证、景区门票以及公司旅游等，已成功服务累计超过400 万人次出游。
同时基于瓢城旅行社旅游网全球中文景点目录以及中文旅游社区，可以更好地帮助游客了解目的地信息，妥善制定好出游计划，并方便地预订旅程中的服务项目。
联系我们
- 瓢城旅行社股份有限公司
- 地址：江苏省盐城市亭湖区大庆中路1234 号
- 邮编：1234567
- 电话：010-88888888
- 传真：010-88666666