一．导航固定

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

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

下滑动而更改。

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