携程首页--使用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平台插件式开发和动态加载技术的原理和实 ...
随机推荐
- cocoapods安装以及ZXingObjC的安装
因为项目要用到第三方包ZXingObjC,需要安装cocoapods.下面是我曲折的安装过程. 1.直接在终端内输入: sudo gem install cocoapods 我直接安装成功. 由于国内 ...
- 【colab pytorch】使用tensorboardcolab可视化
import torch import torch.nn as nn import torch.nn.functional as F import torch.optim as optim from ...
- nes 红白机模拟器 第8篇 USB 手柄支持
买了一个支持 USB OTG, 蓝牙 连接的 安卓手柄. 接到 ubunto 上 dmesg 可以看到识别出来的信息,内核已经支持了. usb - using uhci_hcd usb - usb - ...
- Vue2.0 【第二季】第6节 Component 初识组件
目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...
- frida的简单实用
一.环境 1.环境 1.手机运行服务端 2. 电脑端运行客户端3.进行端口转发 adb forward tcp:27042 tcp:27042 adb forward tcp:27043 tcp:27 ...
- 【Weiss】【第03章】练习3.4、3.5：有序链表求交、并
[练习3.4] 给定两个已排序的表L1和L2,只使用基本的表操作编写计算L1∩L2的过程. [练习3.5] 给定两个已排序的表L1和L2,只使用基本的表操作编写计算L1∪L2的过程. 思路比较简单,测 ...
- 如何查看QQ坦白说来自谁
近两天QQ新功能的坦白说开始席卷朋友圈,一个醒目的小窗就这样明晃晃出现在QQ对话列表"有人对你说:--"下面我们就来整理一下怎么看到是谁给你发送的坦白说呢? 方法一: 此方法仅限于 ...
- 一起了解 .Net Foundation 项目 No.21
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍 中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. UWP Community ...
- JAVA EE,JAVA SE,JAVA ME,JDK,JRE,JVM之间的区别
JAVA EE是开发企业级应用,主要针对web开发有一套解决方案. JAVA SE是针对普通的桌面开发和小应用开发. JAVA ME是针对嵌入式设备开发,如手机. JRE是程序的运行环境 JDK是程序 ...
- 6个出色的Kubernetes发行版，哪款最适合你？
作者简介 Christopher Tozzi,自2008年来以自由职业者的身份对Linux.虚拟化.容器.数据存储及其相关主题进行报道. 本文来自Rancher Labs 时至今日,通过Kuberne ...