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 ...
随机推荐
- VS2012 ffmpeg 没有定义的lrint
在common.h #ifndef AVUTIL_COMMON_H#define AVUTIL_COMMON_H下添加 #define lrint(f) (f>=0?(int32_t)(f+(d ...
- RabbitMQ整合Spring Booot【消费者补偿幂等问题】
如果消费者 运行时候 报错了 package com.toov5.msg.SMS; import org.springframework.amqp.rabbit.annotation.RabbitHa ...
- module已经装了但仍提示找不到的解决方法
今天遇到的问题:(这里只是个例子) 解决方法: npm clean cache --force 删了node_modules 和 package-lock ,然后npm install 如果再不行,看 ...
- Javascript观察者模式（Object.defineProperty、Reflect和Proxy实现）
什么是观察者模式? 答:在数据发生改变时,对应的处理函数自动执行.函数自动观察数据对象,一旦对象有变化,函数就会自动执行. 参考<原生JavaScript实现观察者模式>(https:// ...
- （22）Canny算法
基础知识,主要是看这个博客:https://blog.csdn.net/qq_41167777/article/details/84863351
- hdu 1950 Bridging signals 求最长子序列 （ 二分模板 ）
Bridging signals Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- python3 --- unittest单元测试框架
1.unittest结构 1.单元测试的框架 unittest(python自带,无需额外安装)+接口2.文件,命名时,千万不要写成unittest这样的模块名,会报错的3.功能测试 1)写用例 Te ...
- POJ - 1753 Flip Game (IDA*)
题意:4*4的棋盘摆满棋子,有黑有白,翻转一个棋子的同时也将翻转其上下左右的棋子(翻转后黑变白,白变黑),问使棋盘上所有棋子颜色相同,最少翻转的棋子数. 分析: 1.每个棋子至多翻转1次.翻转偶数次与 ...
- C语言-逃逸字符、类型转换和布尔类型
C语言-逃逸字符 逃逸字符是用来表达无法印出来的控制字符或者特殊字符,它由一个反斜杠""开头,后面跟上另一个字符,这两个字符合起来,组成一个字符. \b是backspace,在su ...
- Spring(5) -(14) pointcut 语法
AOP的规范本应该由SUM公司提出,但是被AOP联盟捷足先登.AOP联盟指定AOP规范,首先就要解决一个问题,怎么表示切入点,也就是在哪些方法上增强(where) AspectJ 是一个面向切面的框架 ...