第32 章项目实战-移动端流体布局5

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第32 章项目实战-移动端流体布局5相关的知识，希望对你有一定的参考价值。

第32 章项目实战-移动端流体布局[5] 学习要点： 1.导航固顶 2.三个栏目 3.公司简介本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．导航固定由于移动设备屏幕高度较低，没有滚动条操作的便利性。一般来说，栏目的导航部分总是固定在移动设备的某一个方位。我们这里将头部的导航永远固定在头部，不会随着页面向下滑动而更改。 //固顶定位 #header { position: fixed; top: 0; z-index: 9999; } //相应的向下便宜45px #adver { padding: .45rem 0 0 0; } 三．三个栏目和固定布局一样，栏目都有一个图片背景以及大小标题。 //html 部分

旅游资讯

介绍各种最新旅游信息、资讯要闻、景点攻略等

票务订购

各种飞机票、火车票、汽车票和轮渡票的订购服务

公司简介

公司的发展历程、获得荣誉以及联系方式

//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

//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; } } 代码：瓢城旅行社-移动端