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 ...
随机推荐
- js 发布订阅模式
//发布订阅模式 class EventEmiter{ constructor(){ //维护一个对象 this._events={ } } on(eventName,callback){ if( t ...
- 【BZOJ1014】火星人prefix（splay，Hash）
题意: . 思路: ; ..,..]of longint; sum,size,fa,a,b,id,mi:..]of longint; n,m,i,x,y,s,k,j,cnt,root:longint; ...
- 在设计DJANGO用户更改密码时，出现NoReverseMatch at /account/password-change/这种妖精如何办？
网上看到很多解决办法.但对于我来说, 好像加个post_change_redirect这个参数是最有效的. from django.conf.urls import url from . import ...
- Leetcode题解（5）：L58/Length of Last Word
L58: Length of Last Word Given a string s consists of upper/lower-case alphabets and empty space cha ...
- leetcode_Product of Array Except Self
描写叙述: Given an array of n integers where n > 1, nums, return an array output such that output[i] ...
- Arduino程序-光敏电阻
尽管造书去做的.但还是有莫名的成就感 从串口显示出,电压变化, void setup() { // put your setup code here, to run once: Serial. ...
- LeetCode 83. Remove Duplicates from Sorted List （从有序链表中去除重复项）
Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...
- ios MetalPerformanceShaders 使用总结
MPSCNNConvolution 1.初始化时传人 UnsafePointer<Float> 时要传入w,不能是 &(w[0]).否则w其实传入失败,卷积的结果是nan或inf. ...
- 02-JZ2440裸机学习之GPIO实验【转】
本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/54910717 版权声明:本文为博主原创文章,转载请注明http://blog.c ...
- Python：SMOTE算法——样本不均衡时候生成新样本的算法
Python:SMOTE算法 直接用python的库, imbalanced-learn imbalanced-learn is a python package offering a number ...