您的位置：首页 > Web前端 > CSS

web前端css的复习（三十九）携程网

2019-04-12 22:32 344 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
body {
min-width: 320px;  /*最小宽度*/
max-width: 540px;  /*最大宽度*/
margin: 0 auto;
}
header {
width: 100%;  /*继承body 的高度   body 540*/
height: 100px;
}
header img {
width: 100%;  /*继承header 的宽度*/
height: 100%;

}
nav {
padding: 8px;
}
.row {
width: 100%;
height: 90px;
background-color: #ff697a;
border-radius: 8px;
display: flex; /*伸缩布局， 父亲加*/
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.row3 {
flex: 1;  /*孩子每人占1份*/
border-left: 1px solid #fff;
}
.row div:first-child {
border: 0;
}
.hotel {
display: flex;
flex-direction: column; /*垂直排列*/
}
.hotel a {
flex: 1;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 45px;
text-decoration: none;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.3);
}
.hotel a:first-child {
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<header>
<img src="images/ctrip.jpg" alt=""/>
</header>
<nav>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3"></div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>
<div class="row">
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="row3 hotel">
<a href="#">团购</a>
<a href="#">同福客栈</a>
</div>
</div>

</nav>
</body>
</html>

       那么如图，效果是这样的。

       上面代码最后就是这样效果，这也是手机端微信小程序的效果。

       下面我来简单的分析一下吧。

       （一）首先先分析页面结构，就是这个flex布局是固定了高度，宽度随着变化而变化，那么这样就很简单了，我们可以在body里面设置一个最大宽度和最小宽度。

       （二）然后设置顶部导航，这样我们设置了最大宽度和最小宽度之后我们固定一个高度就行了，然后照片继承就行了。

       （三）其实再仔细一看那四个区域都是一样的，那么我们就按照一个来讲了。先是一个大div里面放三个小div，然后把这三个小div用水平方向排列布局起来。

       （四）然后再在分别的三个小div里面在设置flex，只不过此时是把水平方向改为垂直方向。然后在设置简单的样式。那么此时我们这个携程网的布局就完成了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

web前端css的复习（三十九）携程网

目录