h5-携程页面小案例-伸缩盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,header,img,main,section,a,nav,p{
padding: 0;
margin: 0;
}
/*顶部块样式*/
header{
width: 100%;
display: flex;
}
header > a{
flex: 1;
}
header > a >img{
width: 100%;
}
/*主题内容块*/
main{
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
main > .item{
width: 100%;
height: 100px;
background-color: #57c3ae;
border-radius: 10px;
margin-top: 10px;
display: flex;
}
main > .item:nth-of-type(2){
background-color: #68cc1a;
}main > .item:nth-of-type(3){
background-color: #cc1c23;
}main > .item:nth-of-type(4){
background-color: #274ccc;
}
main > .item > .left{
flex: 1;
}
main > .item > .right{
flex: 2;
/*换行显示*/
flex-wrap: wrap;
display: flex;
} main > .item > .right > a{
width: 50%;
box-sizing: border-box;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
display: block;
line-height: 50px;
text-align: center;
text-decoration: none;
} main > .item > .right > a:nth-last-of-type(-n+2){
border-bottom:none;
} main > .extra{
width: 100%;
display: flex;
}
main >.extra > a{
flex: 1;
}
main > .extra >a >img{
width: 100%;
} /*底部快样式*/
footer{
width: 100%;
font-size: 13px;
}
footer > nav {
width: 100%;
display: flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
footer > nav > a{
flex: 1;
line-height: 30px;
text-align: center;
color: #888;
text-decoration: none;
} footer > .link {
text-align: center;
line-height: 25px;
}
footer > .copyRight{
text-align: center;
} extra > a > img {
width: 250px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<header>
<a href="">
<img src="https://dimg04.c-ctrip.com/images/7009170000010vksx4641_1920_340_17.jpg" alt="">
</a>
</header>
<main>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="item">
<div class="left"></div>
<div class="right">
<a href="">海外酒店</a>
<a href="">团购</a>
<a href="">特惠酒店</a>
<a href="">客栈公寓</a>
</div>
</section>
<section class="extra">
<a href="">
<img src="../img/xie1.jpg" alt="">
</a>
<a href="">
<img src="../img/xie2.jpg" alt="">
</a>
</section>
</main>
<footer>
<nav>
<a href="">电话预定</a>
<a href="">下载客户端</a>
<a href="">我的订单</a>
</nav>
<p class="link">
<a href="">网上地图</a>
<a href="">ENGLISH</a>
<a href="">电脑版</a>
</p>
<p class="copyRight">©2015 携程旅行</p>
</footer>
</div>
</body>
</html>
效果图
h5-携程页面小案例-伸缩盒子的更多相关文章
- html5——伸缩比例案例（携程）
1.有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2.不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例 ...
- 微信小程序UI------实现携程首页顶部的界面（弹性布局）
今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下: 主要是携程首页的四个模块 ...
- 微信小程序体验(1)：携程酒店机票火车票
在 12 月 28 日微信公开课上,张小龙对微信小程序的形态进行了阐释,小程序有四个特定:无需安装.触手可及.用完即走.无需卸载. 由于携程这种订酒店.火车票和机票等工具性质非常强的服务,非常符合张小 ...
- 小程序跳转H5及其他页面
一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序.已关联的小程序可被使用在自定义菜单和模版消息等场景中. ...
- React Native实践之携程Moles框架
编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...
- React Native之携程Moles框架
因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...
- 携程App的网络性能优化实践
首先介绍一下携程App的网络服务架构.由于携程业务众多,开发资源导致无法全部使用Native来实现业务逻辑,因此有相当一部分频道基于Hybrid实现.网络通讯属于基础&业务框架层中基础设施的一 ...
- 携程React Native实践
React Native(下文简称 RN)开源已经一年多时间,国内各大互联网公司都在使用,携程也在今年 5 月份投入资源开始引入,并推广给多个业务团队使用,本文将会分享我们遇到的一些问题以及我们的优化 ...
- 携程机票的ABTest实践
携程ABTest伴随UBT(User Behavior Tracking System)系统一起,两年多的时间,从最初online寥寥几个实验,到现在单是机票BU每周就有数十个app/online/h ...
随机推荐
- Oracle IF-ELSE条件判断结构
关于条件判断的几个函数: 一.IF-ELSE 判断语句1.IF 语法 IF 表达式 THEN ... END IF; 输入账号名 kiki 以登陆账号 declare v_name ):='& ...
- 七十二、SAP中内表的修改，添加条件语句，多条目修改
一.代码如下 二.MODIFY执行前断点数据 三.查看到数据如下 四.往下单步走一步,发现有3条数据被修改 五.执行后修改如下
- 057-while循环
<?php $x=1; //初始化变量 while($x<=5){ //执行while循环 echo "$x<br />"; $x++; } ?>
- mysql union 和union all
http://www.w3school.com.cn/sql/sql_union.asp
- mysql多表连接查询
新建两张表: 表1:student 截图如下: 表2:course 截图如下: (此时这样建表只是为了演示连接SQL语句,当然实际开发中我们不会这样建表,实际开发中这两个表会有自己不同的主键.) ...
- HDOJ 1722--Cake(切蛋糕问题)
一次生日Party可能有p人或者q人参加,现准备有一个大蛋糕.问最少要将蛋糕切成多少块(每块大小不一定相等),才能使p人或者q人出席的任何一种情况,都能平均将蛋糕分食. Input 每行有两个数p和q ...
- Windows系统安装免费的开源虚拟机软件VirtualBox
https://www.qikegu.com/uncategorized/1179 VirtualBox是什么 VirtualBox是一个虚拟机平台软件,在VirtualBox平台上可以安装各种操作系 ...
- 第十三篇Django Logging配置样例
第十三篇Django Logging配置样例 阅读目录(Content) Django 日志配置模板 官方链接 Django Logging Django 日志配置模板 LOGGING = { 've ...
- java_05_IO
java_05_IO 1,动手动脑 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. 分析思路: 1)找到该文件夹下所有文件. 2)找出其中字节数大于 ...
- UVA - 12107 Digit Puzzle（数字谜）（IDA*）
题意:给出一个数字谜,要求修改尽量少的数,使修改后的数字谜只有唯一解.空格和数字可以随意替换,但不能增删,数字谜中所有涉及的数必须是没有前导零的正数.输入数字谜一定形如a*b=c,其中a.b.c分别最 ...