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 ...
随机推荐
- l5213. 玩筹码
这道题本应该很简单的但是我把他复杂化了,所以没有在第一时间里A出来.我们来看看题目 看上去是不是很复杂,思路是有,但是,很难实现.我最开始的时候是认为有三种情况,左边筹码最多,右边筹码最多,中间筹码最 ...
- Asp.net MVC中表单验证属性的使用
用于检查是否有输入值 :RequiredFieldValidator(必须字段验证)按设定比较两个输入 :CompareValidator(比较验证) 输入是否在指定范围 :RangeValidato ...
- HTML的文档结构与语法（二）
3.7 超链接标记 语法:<a 属性=“值”>对当前链接的描述</a> 作用:网页进行跳转 常用的属性: Href:链接的网址或ip或地址 值:就是具体的地址 T ...
- 066-PHP通过函数名调用函数
<?php function hello(){ //定义函数 echo '<br />Hello!<br />'; } function hellophp(){ //定义 ...
- Spark 内存管理
Spark 内存管理 Spark 执行应用程序时, 会启动 Driver 和 Executor 两种 JVM 进程 Driver 负责创建 SparkContext 上下文, 提交任务, task的分 ...
- 箭头函数this
箭头函数的this值是由包含它的函数(非箭头函数)来决定的,与包含的函数的this指向一致,如果包裹它的不是函数(直到找到最外层)则this指向全局对象 并且箭头函数的this是固定的,由定义它时所在 ...
- hdu 1257 最少拦截系统 求连续递减子序列个数 （理解二分）
最少拦截系统 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- Docker 搭建开源 CMDB平台 “OpsManage” 之 Redis
整体结构如下图 先来在 172.16.0.200 安装docker-ce (新)或 docker-io(旧) 0: Docker-ce (新版本 Docker version 17. ...
- 使用TestNG-xslt美化测试报告
用TestNG测试后,自动会生成html的测试报告,不过相信大家都有感觉,自动生成的测试报告太难看了,所以我们又用了ReportNG来美化它.在 这里给大家再介绍一下比reportNG还要稍稍美观一点 ...
- spring 动态bean注册
1. import org.springframework.beans.MutablePropertyValues; import org.springframework.beans.factory. ...