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 ...
随机推荐
- 官网英文版学习——RabbitMQ学习笔记（五）Publish/Subscribe
发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...
- Docker安装，基本概念，执行流程，生命周期简介
Docker基本概念 在使用Docker前,首先要先知道Docker中这几个常用的概念: 镜像:镜像是文件,只读的,提供了运行完整软硬件应用程序的集装箱. 容器:是镜像的实例,由Docker负责创建, ...
- [LeetCode] 932. Beautiful Array 漂亮数组
For some fixed N, an array A is beautiful if it is a permutation of the integers 1, 2, ..., N, such ...
- tornado+peewee-async+peewee+mysql（一）
前言: 需要异步操作MySQL,又要用orm,使用sqlalchemy需要加celery,觉得比较麻烦,选择了peewee-async 开发环境 python3.6.8+peewee-async0.5 ...
- 第二阶段scrum-8
1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 消息收发制作中
- Aspen安装过程报错总结
前几天一直帮朋友安装Aspen v11,因为之前的老版本总是报错,报错内容大概是证书过期了, 一开始朋友电脑上的老版本的Aspen 8卸载了,删除之前的数据库SqlServer 2012 ,然后重新安 ...
- vzray服务端配置
打开securecrt登陆服务器 输入命令:bash <(curl -s -L https://git.io/vzray.sh)1 回车tcp 回车端口 回车默认 回车
- opencv python运动人体检测
采用非极大值抑制,将重叠的框合并成一个. # import the necessary packages from imutils.object_detection import non_max_su ...
- Elasticsearch 使用集群 - 创建和查询文档
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...
- ACM-Alice and Bob
题目描述:Alice and Bob One day, Alice asks Bob to play a game called “K-in-a-row”. There is a game board ...