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 ...
随机推荐
- sprintf与sscanf用法举例
一.sscanf 从tmp中读取a,b,c. int main(){ ]; int a; double b; ]; while(gets(tmp) != NULL){ sscanf(tmp, &quo ...
- crmv2项目
maven -----------------------------------------------------------------------------感谢打赏!
- 113-PHP使用instanceof判断变量是否为某个类对象
<?php class ren{ //定义人类 } class mao{ //定义猫类 } $ren=new ren(); //实例化一个人类的对象 $mao=new mao(); //实例化一 ...
- POJ 1770 树形DP
咋一看确实想到的是树形DP,但是我一开始也马上想到环的情况,这样应该是不可以进行树形DP的,然后我自以为是地想用有向图代替无向图,而且总是从能量高的指向能量低的,这样自以为消除了环,但是其实是不对滴, ...
- POJ 1177/HDU 1828 picture 线段树+离散化+扫描线 轮廓周长计算
求n个图矩形放下来,有的重合有些重合一部分有些没重合,求最后总的不规则图型的轮廓长度. 我的做法是对x进行一遍扫描线,再对y做一遍同样的扫描线,相加即可.因为最后的轮廓必定是由不重合的线段长度组成的, ...
- hdu 1160 上升序列 dp
FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- SpringMVC： JSON
SpringMVC:JSON讲解 什么是JSON? JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式,目前使用特别广泛. 采用完全独立于编 ...
- 【Android】家庭记账本手机版开发报告七
一.说在前面 昨天 实现了账单的图标显示 今天 本地化,测试APP,将工程源码放到github上 源码:https://github.com/xiaotian12-call/Android_Boo ...
- 一条命令解决：No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
1.找到目录D:\android\Sdk\ndk-bundle\toolchains.(根据自己的安装路径找到) 2.该路径下打开终端执行ln -sf aarch64-linux-android-4. ...
- 【LeetCode】搜索旋转排序数组
[问题]假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个 ...