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 ...
随机推荐
- python——正则表达式的理解
概念:又称规则表达式,常用来检索.替换符合某个规则的文本. 理解:特殊字符--------->规则---------->过滤字符串 目的:1.匹配给定的字符串,2.从字符串中过滤出我们需要 ...
- 将完整的Maven远程存储库下载到本地存储库（别试了，不太可取）
别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...
- css3 字体自适应
css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% ...
- Solid Edge如何估算零件的质量，重心等物理性质
点击检查-物理性质,勾选"显示符号"即可显示质心和形心(先点击更新,更新每个零件的密度). 最后得到质心和形心
- scikit-learn： isotonic regression（保序回归，非常有意思，仅做知识点了解，但差点儿没用到过）
http://scikit-learn.org/stable/auto_examples/plot_isotonic_regression.html#example-plot-isotonic-reg ...
- mac 浏览器解决跨域问题
Chrome:命令行执行如下命令open -a Google\ Chrome --args --disable-web-security出现如下提示,说明已经开启: Safari: open -a ' ...
- 万维网 WWW (World Wide Web)
万维网 WWW (World Wide Web)并非某种特殊的计算机网络.万维网是一个大规模的.联机式的信息储藏所.万维网用链接的方法能非常方便地从因特网上的一个站点访问另一个站点,从而主动地按需获取 ...
- C++中stringstream ostringstream istringstream使用方式
C++引入了ostringstream.istringstream.stringstream这三个类,要使用他们创建对象就必须包括sstream.h头文件. istringstream类用于运行C++ ...
- C++之内部类（内部类就是外部类的友元类，单向友元。只是内部类比友元类多了一点权限）
1. 内部类的概念 如果一个类定义在另一个类的内部,这个内部类就叫做内部类.注意此时这个内部类是一个独立的类,它不属于外部类,更不能通过外部类的对象去调用内部类.外部类对内部类没有任何优越的访问权限. ...
- c++中读写文件操作
读写文件这个,不常用,每次用的时候都会百度一下,每次写法还都不一样,所有总是记混.今天利用点时间总结下之前工程中用过的.以后就安照这种方法写了. 搞acmicpc的时候喜欢用freopen(),这个是 ...