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 ...
随机推荐
- 洛谷——P1103 书本整理
https://www.luogu.org/problem/show?pid=1103 题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的书,所 ...
- jd-eclipse插件的安装
一,资源 jd-eclipse-site-1.0.0-RC2.zip 百度网盘链接:https://pan.baidu.com/s/1GTFFY_1jg4k9vjZNE4JliQ 提 ...
- 又通过一道题目，替换字符串 —— 剑指Offer
https://www.nowcoder.net/practice/4060ac7e3e404ad1a894ef3e17650423?tpId=13&tqId=11155&tPage= ...
- uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索
迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...
- 新手学測试----Unit Test（单元測试）
在程序猿做项目的过程中,每当完毕一个功能,首先自己须要对完毕的功能进行測试.我如今正在做的项目用的工具是VS2012.那么接下来,就说一说在VS2012中是怎样创建单元測试的. 怎样创建单元測试? 在 ...
- Java中的equals()和hashCode()
概述 在我们使用类集框架(比方使用hashMap.hashSet)的时候,常常会涉及到重写equals()和hashCode()这两个方法. 这两个方法的联系是: 1. 假设两个对象不同,那么他们的h ...
- 从零单排入门机器学习：Octave/matlab的经常使用知识之矩阵和向量
Octave/matlab的经常使用知识之矩阵和向量 之前一段时间在coursera看了Andrew ng的机器学习的课程,感觉还不错.算是入门了.这次打算以该课程的作业为主线,对机器学习基本知识做一 ...
- 中文在C/C++中的处理和汉字乱码问题（wchar_t）
中文字在C/C++中的处理 现在编程的语言和编程环境随着中国的发展開始对中文有进一步的支持.可是对中文的支持整体来说是有缺陷的,并且有与编译环境的不同导致中文在当前的C/C++中有非常多问题,并且非常 ...
- Android首次启动时间长优化之预编译提取Odex
提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...
- [译]使用AssetBundle Manader
AssetBundle and the AssetBundle Manager 介绍 AssetBundle允许从本地或者远程服务器加载Assets资源,利用AssetBundles技术,Assets ...