-
效果图:
image.png
- 部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11.说走就走携程网.html</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
min-width: 320px;
max-width: 540px;
margin: 0 auto;
/*1.5是行高 即当前的字1.5倍*/
font: normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
}
header{
height: 120px;
overflow: hidden;
}
header img{
height: 100%;
width: auto;
}
nav{
border: 1px solid #ccc;
padding: 4px;
}
.row{
height: 90px;
display: flex; /*伸缩布局 父*/
border-radius: 5px;
overflow: hidden;
}
.row div{
height: 100%;
flex: 1; /*子*/
background-color: #FF697A;
border-right: 1px solid #fff;
}
.row div:nth-child(3){ /*清除div中的第三个div右border*/
border-right: 0;
}
.row div a{
display: block; /*把a转换成块元素*/
width: 100%;
height: 100%;
}
.row33{
display: flex;
flex-direction: column; /*垂直分布*/
}
.row33 a{
flex: 1;
}
.row33 a:first-child{
border-bottom: 1px solid #fff;
}
</style>
</head>
<body>
<header>
<img src="images/banner.jpg" alt="">
</header>
<nav>
<div class="row">
<div>
<a href="#"></a>
</div>
<div class="row33">
<a href="#">1</a>
<a href="#">2</a>
</div>
<div class="row33">
<a href="#">1</a>
<a href="#">2</a>
</div>
</div>
</nav>
</body>
</html>
- 素材
banner.jpg
携程.png
