html5——伸缩比例案例（携程）

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——伸缩比例案例（携程）的更多相关文章

html5——伸缩比例
基本概念 1.父盒子设置了伸缩属性,子盒子设置伸缩比例 2.以上设置完之后子盒子会按照比例分布在父盒子中 3.当设置伸缩比例时默认会按照x轴方向分配,因为默认情况下伸缩布局主轴方向是x轴方向 4.设置 ...
我所了解的各公司使用的 Ceph 存储集群 (携程、乐视、有云、宝德云、联通等)
Ceph 作为软件定义存储的代表之一,最近几年其发展势头很猛,也出现了不少公司在测试和生产系统中使用 Ceph 的案例,尽管与此同时许多人对它的抱怨也一直存在.本文试着整理作者了解到的一些使用案例. ...
React Native实践之携程Moles框架
编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...
IBM、京东、携程、eBay 的 OpenStack 云
我所了解的 IBM.京东.携程.eBay 的 OpenStack 云参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文 ...
React Native之携程Moles框架
因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...
Asp.Net Core与携程阿波罗(Apollo)的第一次亲密接触
一.瞎扯点什么 1.1 阿波罗阿波罗是希腊神话中的光明之神.文艺之神,同时也是罗马神话中的太阳神:他是光明之神,从不说谎,光明磊落,在其身上找不到黑暗,也被称作真理之神.他非常聪明,通晓世事,是 ...
Webmagic 爬虫框架爬取马蜂窝、携程旅游、汽车之家游记信息
WebMagic学习遇到的问题 Log4j错误解决:在src目录下添加配置文件 log4j.properties log4j.rootLogger=INFO, stdout, file log4j ...
携程Apollo配置中心架构深度剖析
转自:http://www.uml.org.cn/wfw/201808153.asp 一.介绍 Apollo(阿波罗)[参考附录]是携程框架部研发并开源的一款生产级的配置中心产品,它能够集中管理应用在 ...
携程机票的ABTest实践
携程ABTest伴随UBT(User Behavior Tracking System)系统一起,两年多的时间,从最初online寥寥几个实验,到现在单是机票BU每周就有数十个app/online/h ...

随机推荐

android中listview点击事件的监听实现
listview_bookmark.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public vo ...
51Nod——T 1631 小鲨鱼在51nod小学
https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1631 基准时间限制:1 秒空间限制:131072 KB 分值: 20 ...
Ubuntu 16.04安装设备管理器Hardinfo和lshw设备信息命令
安装: sudo apt-get install hardinfo 启动: 实际上这些信息都可以通过lshw进行查看,参考:https://linux.die.net/man/1/lshw
Ubuntu 16.04通过Trickle限制某个软件的下载/上传速度
在Linux下没有Windows使用360那样去限制某个软件的速度. 但是通过Trickle可以设置某个软件的网速,但是前提是通过Trickle命令连带启动这个软件才可以,不能中途去设置. 比如现在很 ...
gn3 --iou
http://www.wyzc.com/Course/Course/learnAction/id/14049/center/0#lesson/400847 http://www.mamicode.co ...
svn: 命令行上传多个指定文件
上传指定后缀名文件 svn st | grep swift | cut -d' ' -f8- > targets.txt svn ci -m "comments" --tar ...
纯CSS实现移动端常见布局——高度和宽度挂钩的秘密
纯CSS实现移动端常见布局--高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy, ...
虚拟化（二）：虚拟化及vmware workstation产品使用
虚拟化(一):虚拟化及vmware产品介绍 vmware workstation的最新版本号是10.0.2. 相信大家也都使用过,当中的简单的虚拟机的创建.删除等,都非常easy.这里就不再具体说明了 ...
Struts2之类型转换器的使用
一.学习案例:通过在输入页面(input.jsp)用同一个输入框同一时候输入username和password,通过类型转换器在输出页面(output.jsp)分别输出username和passwor ...
数据库html 数据的分句
Python 中文分句 - CSDN博客 https://blog.csdn.net/laoyaotask/article/details/9260263 # 设置分句的标志符号:可以根据实际需要进行 ...

html5——伸缩比例案例（携程）

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

随机推荐

热门专题