携程首页--使用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>
版权声明：本文为Johootype原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。