携程首页--使用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平台插件式开发和动态加载技术的原理和实 ...
随机推荐
- 基于Linux Lite 4.8制作“Windows 12 Lite”正式发布
值得注意的是,这款Windows 12 Lite的宣传标语将矛头直指Windows 10,声称不会迫使用户更新.不会存在病毒或恶意软件.启动速度比Win 10快3倍.提供8万多款优质软件.允许与Win ...
- 【猫狗数据集】使用预训练的resnet18模型
数据集下载地址: 链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw提取码:2xq4 创建数据集:https://www.cnblogs.com/xi ...
- HashMap底层源码剖析
HashMap底层源码剖析 一.HashMap底层用到的数据结构 数组+单向链表+红黑树 数组:数组每一项都是一个链表,其实就是数组和链表的结合体 单向链表:当法神hash碰撞时,首先会找到数组对应位 ...
- js 实现简单的导航下拉列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- flask连接数据库的URI书写格式
1. MySQL mysql://username:password@hostname/database 2. PostgreSQL postgresql://username:password@ho ...
- Python离线项目迁移部署
最近遇到了一个场景:需要将Python项目文件打包到无法联网的主机上部署执行,本篇文章记录针对于该场景的处理方案. 说明: 源主机(可联网):安装了Python3和pip3 目标主机(无法联网):需安 ...
- Python基础篇(三)_函数及代码复用
Python基础篇_函数及代码复用 函数的定义.使用: 函数的定义:通过保留字def实现. 定义形式:def <函数名>(<参数列表>): <函数体> return ...
- Magento2-2.3.4 win10安装完magento无法加载静态资源导致无法进入后台登录页面
后台面无法进入,截图如下
- VScode 快捷键大全
按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + ...
- C++技法杂记
C++ 技法杂技杂记 1. 枚举 1.1 枚举继承(Enum Inheritance) struct Enum{ enum{ One = 1, Two, Last }; }; struct EnumD ...