携程首页--使用flex布局实现
携程首页
flex解决了float和postion的遗留问题，对移动端比较友好。
- 需要水平排列的元素就为其父元素设置display:flex,并为子元素添加flex的值（比例）
- 布局时可以先从大的页面着手，搭建出基本的框架
.banner>.nav+.extra+.footer
比如：.nav下面是有很多item，根据观察分为左边部分和右边部分，因此nav就是flex布局;sub和pub的比例就是1:2..
值得注意的地方就是sub下面的a是使用float进行布局的，因此是两种布局方式结合使用.
先放一张图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a,
a:hover {
color: #eee;
text-decoration: none;
}
body {
background-color: #eee;
}
html,
body {
width: 100%;
}
/* 外部容器是flex布局 */
.layout {
background-color: #fff;
width: 100%;
height: 1000px;
margin: 0 auto;
/* 设置盒子大小 */
min-width: 320px;
max-width: 640px;
}
.banner img {
width: 100%;
}
.nav {
padding: 5px;
}
.item {
height: 90px;
background-color: pink;
margin-bottom: 5px;
border-radius: 5px;
display: flex;
}
.item:nth-child(2) {
background-color: yellowgreen;
}
.item:nth-child(3) {
background-color: green;
}
.item:nth-child(4) {
background-color: darksalmon;
}
.item:last-child a {
width: 33.33%;
}
.pub {
flex: 1;
}
.sub {
flex: 2;
}
.sub a {
height: 45px;
float: left;
width: 50%;
text-align: center;
line-height: 45px;
color: #fff;
font-size: 14px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
box-sizing: border-box;
}
.extra {
display: flex;
}
.extra a{
flex: 1;
}
.extra img{
width: 100%;
}
.f-nav{
display: flex;
height: 40px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.f-nav li{
flex: 1;
text-align: center;
line-height: 40px;
color:#eee;
}
.footer p{
text-align: center;
font-size: 14px;
color:#ccc
}
</style>
</head>
<body>
<!-- 外部容器 -->
<div class="layout">
<div class="banner">
<img src="./images/banner4.jpg" alt="" />
</div>
<div class="nav">
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="javascript:;">团购</a>
<a href="javascript:;">特惠酒店</a>
<a href="javascript:;">客栈公寓</a>
</div>
</div>
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">火车票</a>
<a href="javascript:;">汽车票船票</a>
<a href="javascript:;">国际机票</a>
<a href="javascript:;">自驾专车</a>
</div>
</div>
<div class="item">
<div class="pub"></div>
<div class="sub">
<a href="javascript:;">攻略身边</a>
<a href="javascript:;">邮轮</a>
<a href="javascript:;">周末游</a>
<a href="javascript:;">保险签证</a>
</div>
</div>
<div class="item">
<div class="sub">
<a href="javascript:;">门票玩乐</a>
<a href="javascript:;">美食</a>
<a href="javascript:;">全球购</a>
<a href="javascript:;">礼品卡</a>
<a href="javascript:;">出境WIFI</a>
<a href="javascript:;">更多</a>
</div>
</div>
</div>
<div class="extra">
<a href="javascript:;void(0)">
<img src="./images/extra_1.png" alt="">
</a>
<a href="javascript:;void(0)">
<img src="./images/extra_1.png" alt="">
</a>
</div>
<div class="footer">
<ul class="f-nav">
<li><a href="javascript:;void(0)">
我的
</a></li>
<li><a href="javascript:;void(0)">
客户端
</a></li>
<li><a href="javascript:;void(0)">
下载
</a></li>
</ul>
<p>网站地图｜导航｜电脑版</p>
<p>@2020携程旅行</p>
</div>
</div>
</body>
</html>
携程首页--使用flex布局实现的更多相关文章
- 微信小程序UI------实现携程首页顶部的界面（弹性布局）
今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下: 主要是携程首页的四个模块 ...
- Android 仿携程活动列表边框布局
实现如下图所示的一个页面布局 布局框架 思路讲解: 1.一开始的思路是使用android提供的画布将布局中的内容花下来,之后想了想觉得比较麻烦,所以又开启了另外一条思路. 2.如上图“布局框架”所示. ...
- 今天携程出事了：让我们来学习下http的响应码
就在今天,2015年5月28日,中国最大的旅游机票预订网站--携程网粗大事了.据传携程网的数据库被人物理删除了,而容灾备份的数据又无法正常使用,服务器全面遭受瘫痪.每小时给携程带来的损失约100万美元 ...
- 携程移动端案列（flex布局、背景图缩放，文字阴影）
效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...
- 携程Android App插件化和动态加载实践
携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...
- React Native实践之携程Moles框架
编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支 ...
- IBM、京东、携程、eBay 的 OpenStack 云
我所了解的 IBM.京东.携程.eBay 的 OpenStack 云 参加过几次 OpenStack meetup 活动,听过这几家公司的Architect 讲他们公司的 OpenStack产品.本文 ...
- React Native之携程Moles框架
因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将 ...
- 携程Android App的插件化和动态加载框架
携程Android App的插件化和动态加载框架已上线半年,经历了初期的探索和持续的打磨优化,新框架和工程配置经受住了生产实践的考验.本文将详细介绍Android平台插件式开发和动态加载技术的原理和实 ...
随机推荐
- 通过mockjs来制作假数据
需用用到的模块为express和mockjs //导入模块开启服务器模块 const express=require('express') //导入假数据模块 const mockjs=require ...
- Simulink仿真入门到精通（三） Simulink信号
3.1 Simulink信号概述 所谓信号,表示一种随着时间而变化的量,在时间轴上的采样时刻都对应有数值. 信号在Simulink中是相当重要的组成部分,有线(line)表示,在模型中穿针引线地将各模 ...
- django中ORM中锁和事务
一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在事务里面,至于如何开启事务,我们看下面的事务一节. 返回一个锁住行直 ...
- Qt5小Demo之猜数字游戏
玩法:设定时间进行猜数字,所猜数字为一个四位数,输入自己的数字,系统会提示是大了还是小了,依据条件逐步逼近正确结果.在规定时间里猜对即获胜,否则即失败. 平台支持:Win10下测试正常. 源码地址: ...
- rem - 移动前端自适应适配布局解决方案和比较(转载)
原文链接:http://caibaojian.com/mobile-responsive-example.html 互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:· 固定一个某些 ...
- 物联网时代-新基建-ThingsBoard调试环境搭建
前言 2020开年之际,科比不幸离世.疫情当道.经济受到了严重的损失.人们都不幸的感慨: 2020年真是太不真实的一年,可以重新来过就好了!国家和政府出台了拯救经济和加速建设的利好消息.3月份最热的词 ...
- Linux 部署Tomcat图文注解 一学就会
导读 安装tomcat前首先要安装对应的jdk并配置Java环境. 安装jdk,请参考:点我直达 安装Tomcat 下载Tomcat包 官网地址:点我直达 Tomcat与jdk兼容关系 注:Tomca ...
- 妈妈再也不担心我面试被Redis问得脸都绿了
长文前排提醒,收藏向前排提醒,素质三连 (转发 + 在看 + 留言) 前排提醒! 前言 Redis 作为一个开源的,高级的键值存储和一个适用的解决方案,已经越来越在构建 「高性能」.「可扩展」 的 W ...
- Python-练习 while 和for 循环
# while 循环 age = 56count = 0 while count < 3 : guess_age=int(input('输入年龄:')) if guess_age == age: ...
- Java 中，如何对日期进行加减操作
今天在做项目时,遇到了对时间的加减进行操作的需求,根据传入的日期字符串,操作参数("+","-"),加数(要操作的天数),对日期进行加减操作,经查询资料,自己写 ...