携程首页--使用flex布局实现
时间:2020-04-11
本文章向大家介绍携程首页--使用flex布局实现,主要包括携程首页--使用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>
原文地址:https://www.cnblogs.com/Johootype/p/12680780.html
- 卡奇话爬虫使用方法以及下载地址
- flash读取XML 背景自动适应大小
- 记录一个发邮件的cs文件
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox
- xml-rpc(2)-first demo_v2
- xml-rpc(1)-first demo
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(55)-工作流设计-表单布局
- 网站源文件被注入了iframe代码—ARP欺骗的木马病毒攻击
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--工作流演示截图
- 基于CPPN与GAN+VAE生成高分辨率图像
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(54)-工作流设计-所有流程监控
- (收藏)搭建.NET Framework 3.0开发环境 及SharePoint 2007/WSS 3环境
- WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法