1、有图片的盒子，最好是父盒子设置伸缩属性，a标签设置伸缩比例1，img标签宽度100%

2、不要见到父盒子就设置伸缩属性，而是根据子盒子是否占据一行，若是子盒子占据一行，那么只要给子盒子设置伸缩比例就行了

3、父盒子设置伸缩属性，子盒子的盒子模式就会变成box-sizing：border-box

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        body {

            height: 2000px;

        }

        .layout {

            width: 100%;

            /* 最小宽度 320px*/

            min-width: 320px;

        }

        a {

            text-align: center;

            text-decoration: none;

            color: #fff;

        }

        header {

            display: flex;

        }

        header a {

            flex: 1;

        }

        header img {

            width: 100%;

            display: block;

        }

        .nav .item {

            display: flex;

            height: 90px;

            background-color: deeppink;

            margin-top: 10px;

            border-radius: 10px;

        }

        .item .left {

            flex: 1;

            border-right: 1px solid #fff;

            border-bottom: 1px solid #fff;

        }

        .item .right {

            flex: 2;

        }

        .item .right a {

            width: 50%;

            height: 45px;

            float: left;

            /*盒子模式：盒子宽度以边框宽度为准*/

            box-sizing: border-box;

            border-right: 1px solid #fff;

            border-bottom: 1px solid #fff;

            line-height: 45px;

        }

        .item:nth-child(4) .right a {

            width: 33.33%;

            height: 45px;

            float: left;

            /*盒子模式：盒子宽度以边框宽度为准*/

            box-sizing: border-box;

            border-right: 1px solid #fff;

            border-bottom: 1px solid #fff;

            line-height: 45px;

        }

        .extra {

            display: flex;

        }

        .extra a {

            flex: 1;

        }

        .extra a img {

            width: 100%;

        }

        footer section.foot-nav {

            display: flex;

            border-top: 1px dashed #000000;

            /*border-bottom: 1px dashed #000000;*/

        }

        footer section.foot-nav a {

            flex: 1;

            color: #333;

            line-height: 60px;

        }

        .copyright {

            text-align: center;

        }

        .copyright a {

            line-height: 60px;

            color: #333;

        }

    </style>

</head>

<body>

<div class="layout">

    <!--头部-->

    <header>

        <a href="javascript:;">

            <img src="data:images/banner.jpg">

        </a>

    </header>

    <!--导航-->

    <nav class="nav">

        <div class="item">

            <div class="left"></div>

            <div class="right">

                <a href="javascript:;">海外酒店</a>

                <a href="javascript:;">团购</a>

                <a href="javascript:;">特惠酒店</a>

                <a href="javascript:;">客栈公寓</a>

            </div>

        </div>

        <div class="item">

            <div class="left"></div>

            <div class="right">

                <a href="javascript:;">海外酒店</a>

                <a href="javascript:;">团购</a>

                <a href="javascript:;">特惠酒店</a>

                <a href="javascript:;">客栈公寓</a>

            </div>

        </div>

        <div class="item">

            <div class="left"></div>

            <div class="right">

                <a href="javascript:;">海外酒店</a>

                <a href="javascript:;">团购</a>

                <a href="javascript:;">特惠酒店</a>

                <a href="javascript:;">客栈公寓</a>

            </div>

        </div>

        <div class="item">

            <div class="right">

                <a href="javascript:;">门票玩乐</a>

                <a href="javascript:;">美食</a>

                <a href="javascript:;">全球购</a>

                <a href="javascript:;">礼品卡</a>

                <a href="javascript:;">出境WIFI</a>

                <a href="javascript:;">更多</a>

            </div>

        </div>

    </nav>

    <!--其他-->

    <section class="extra">

        <a href="javascript:;"><img src="data:images/extra_1.png"></a>

        <a href="javascript:;"><img src="data:images/extra_2.png"></a>

    </section>

    <!--底部-->

    <footer>

        <!--底部导航-->

        <section class="foot-nav">

            <a href="javascript:;">电话预订</a>

            <a href="javascript:;">下载客户端</a>

            <a href="javascript:;">我的</a>

        </section>

        <!--版权信息-->

        <section class="copyright">

            <p class="link">

                <a href="javascript:;">网站地图</a> |

                <a href="javascript:;">ENGLISH</a> |

                <a href="javascript:;">电脑版</a>

            </p>

            <p><a href="javascript:;">©2015 携程旅行</a></p>

        </section>

    </footer>

</div>

</body>

</html>

html5——伸缩比例案例（携程）的更多相关文章

  1. html5——伸缩比例

    基本概念 1.父盒子设置了伸缩属性,子盒子设置伸缩比例 2.以上设置完之后子盒子会按照比例分布在父盒子中 3.当设置伸缩比例时默认会按照x轴方向分配,因为默认情况下伸缩布局主轴方向是x轴方向 4.设置 ...

  2. 我所了解的各公司使用的 Ceph 存储集群 (携程、乐视、有云、宝德云、联通等)

    Ceph 作为软件定义存储的代表之一,最近几年其发展势头很猛,也出现了不少公司在测试和生产系统中使用 Ceph 的案例,尽管与此同时许多人对它的抱怨也一直存在.本文试着整理作者了解到的一些使用案例. ...

  3. React Native实践之携程Moles框架

    编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...

  4. IBM、京东、携程、eBay 的 OpenStack 云

    我所了解的 IBM.京东.携程.eBay 的 OpenStack 云 参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文 ...

  5. React Native之携程Moles框架

    因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...

  6. Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触

    一.瞎扯点什么 1.1 阿波罗 ​ 阿波罗是希腊神话中的光明之神.文艺之神,同时也是罗马神话中的太阳神:他是光明之神,从不说谎,光明磊落,在其身上找不到黑暗,也被称作真理之神.他非常聪明,通晓世事,是 ...

  7. Webmagic 爬虫框架 爬取马蜂窝、携程旅游、汽车之家游记信息

    WebMagic学习 遇到的问题 Log4j错误 解决:在src目录下添加配置文件 log4j.properties log4j.rootLogger=INFO, stdout, file log4j ...

  8. 携程Apollo配置中心架构深度剖析

    转自:http://www.uml.org.cn/wfw/201808153.asp 一.介绍 Apollo(阿波罗)[参考附录]是携程框架部研发并开源的一款生产级的配置中心产品,它能够集中管理应用在 ...

  9. 携程机票的ABTest实践

    携程ABTest伴随UBT(User Behavior Tracking System)系统一起,两年多的时间,从最初online寥寥几个实验,到现在单是机票BU每周就有数十个app/online/h ...

随机推荐

  1. codevs1099 字串变换

    题目描述 Description 已知有两个字串 A$, B$ 及一组字串变换的规则(至多6个规则): A1$ -> B1$ A2$ -> B2$ 规则的含义为:在 A＄中的子串 A1$ ...

  2. 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录

    目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...

  3. 微軟将弃用 System.Data.OracleClient

    http://www.cnblogs.com/WizardWu/archive/2010/05/17/1737009.html 微軟将从 .NET 4 以后的版本弃用 System.Data.Orac ...

  4. 【Android 开发实例】时间管理APP开发之数据库设计

    当然也能够先写界面什么的.可是,总认为先把数据库后台写好在写界面比較放心. 对于数据库的设计,我一開始没什么概念.甚至不知道怎样下手,一開始想着设计成几个表?有哪些字段? 最后用了两天时间,还是一无所 ...

  5. Workspace in use or cannot be created, choose a different one.--错误解决的方法

    eclipse 使用一段时间后.有时会由于一些故障自己就莫名奇异的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use or ...

  6. jsoncpp的生成和使用

    从github下载jsoncpp-master 在执行\jsoncpp-master\makefiles\msvc2010文件夹下jsoncpp.sln 会有3个项目 执行lib_json项目生成li ...

  7. android:怎样在TextView实现图文混排

    我们通常在TextView文本中设置文字.但是怎样设置图文混排呢? 我就在这里写一个样例 .我们须要用到一点简单的HTML知识 在TextView中预订了一些类似HTML的标签,通过标签能够使Text ...

  8. Can JavaScript connect with MySQL? 浏览器控制台的js采集数据结果持久化存储

    浏览器控制台的js采集数据结果持久化存储 how to open a file in javascript https://developer.mozilla.org/en-US/docs/Web/A ...

  9. MCU低功耗设计（三）产品

    关键词: 低功耗设计, 无线通信产品, LoRa长距离, Contiki系统, 能耗实时跟踪 引言: 能耗对电池供电的产品来说是一个重大问题.一旦电能耗尽设备将"罢工".在< ...

  10. 我的Android进阶之旅------&gt;Android关于ImageSpan和SpannableString的初步了解

    近期要实现一个类似QQ聊天输入框.在输入框中能够同一时候输入文字和表情图像的功能.例如以下图所看到的的效果: 为了实现这个效果.先去了解了一下ImageSpan和SpannableString的使用方 ...