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 ...
随机推荐
- poj 2823 二分法+单调队列
#include<stdio.h> #include<string.h> #define N 1100000 int a[N]; int fmin[N],fmax[N]; i ...
- 个人常用git命令
最近开始使用git,将自己常用git命令做一个简单归纳,便于记忆. 初始化及配置 git init:初始化资料库 git config --global user.name 'xxx':配置用户名 g ...
- 如何在eclipse中用maven编译
在eclipse中用maven编译的方法: 在项目中的“pom.xml”文件上点击右键,在弹出的菜单中选择“Run AS”à“Maveninstall”来编译和生成项目.如下图所示: 在编译和生成过程 ...
- RoseLdz源代码下载地址
http://download.csdn.net/detail/u010296979/8152805
- Erlang下与其他程序和语言的通信机制（2）
前面聊了普通端口,今天聊下链入式驱动端口,以及NIFs. 链入式驱动端口 如上图所示,链入式驱动端口与Erlang虚拟机存在于同一个OS进程中. 在Erlang这边与普通端口类似,所有与链入式驱动端口 ...
- Hibernate基于注解的双向one-to-many映射关系的实现
在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...
- 四:Java之字符串操作String、StringBuffer和StringBuilder
string是我们经经常使用到的一个类型,事实上有时候认为敲代码就是在重复的操作字符串,这是C的特点,在java中.jdk非常好的封装了关于字符串的操作.三个类String .StringBuffer ...
- linux RHEL 修改hostname 不需要重启机器
1. 修改/etc/sysconfig/network 中的hostname HOSTNAME=newhostname 运行命令起作用: /etc/rc.d/rc.sysinit 2. 修改/ect/ ...
- 【Aladdin Unity3D Shader编程】之二 光照模型(一)
光照模型 光照模型就是一个公式,使用这个公式来计算在某个点的光照效果. 在标准光照模型里面,我们把进入摄像机的光分为下面四个部分: 自发光 类似生活中的萤火虫等自己能够发光 高光反射 类似生活中的镜子 ...
- 全面解析布局(Grid & Canvas &StackPanel &Wrappanel) 转
写这篇文章前,特意在百度搜索了一下,发现目前网上介绍布局的文章不多,质量也不是很高.拿grid和canvas来讲,这两个布局容器还是有许多小细节值得讲的,如果你不了解的话,开发中经常会遇到一些让人匪夷 ...