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 ...
随机推荐
- [K/3Cloud] 表单python脚本使用QueryService的做法
听说有些朋友想在表单里做自定义的界面数据处理,一般来说写个表单插件会很容易解决这类问题.但是鉴于C#插件开发的不便性和实施搭建开发环境的麻烦,在现场做C#开发可能会不太方便(没部署开发环境之类的问题) ...
- 分块试水--CODEVS5037 线段树练习4加强版
感觉这才算入门题吧..前面那些线段树练习,改几个字符就过了一定要搞成几道题.. n<=2e5的数列,给常数K<=2e5,m<=2e5个操作,区间加,问一个区间里K的倍数. 这题空间? ...
- 交友app
编辑注记:这是由译者 han_qi 翻译纽约客的一篇文章,从女性的角度描写了交友产品的用户体验及需求,值得广大产品经理深入研究,文章略长,但值得深读.原文<Overwhelmed and Cre ...
- 《Spring in action》之Spring之旅
Spring框架作用是简化java开发的复杂性.下面是spring in action 对spring初步介绍. 一.主要有4种关键策略: 1. 基于POJO的轻量级和最小侵入性编程 . 2. 通过依 ...
- 1043 方格取数 2000 noip 提高组
1043 方格取数 2000 noip 提高组 题目描述 Description 设有N*N的方格图(N<=10,我们将其中的某些方格中填入正整数,而其他的方格中则放入数字0.如下图所示(见样 ...
- MyBatis3教程
MyBatis3教程: http://www.yihaomen.com/article/java/302.htm http://www.mybatis.org/mybatis-3/zh/index.h ...
- 二维数组的查找，刷题成功——剑指Offer
今天又做了一道题目,通过啦,欧耶! https://www.nowcoder.net/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&tqI ...
- 用Arduino对Apple手表进行远程红外控制
描写叙述 用于控制随意红外设备的Apple手表及iPhone应用. IOS应用发送HTTP请求至一个或多个带有以太网插板的Arduino.Arduino正在解析http请求并发送红外信号.Arduin ...
- POJ 2485 Highways && HDU1102（20/200）
题目链接:Highways 没看题,看了输入输出.就有种似曾相识的感觉,果然和HDU1102 题相似度99%,可是也遇到一坑 cin输入居然TLE,cin的缓存不至于这么狠吧,题目非常水.矩阵已经告诉 ...
- 《textanalytics》课程简单总结（1）：两种word relations——Paradigmatic vs. Syntagmatic
coursera上的公开课<https://www.coursera.org/course/textanalytics>系列,讲的很不错哦. 1.两种关系:Paradigmatic vs. ...