效果图:
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
作者：O卡米
链接：https://www.jianshu.com/p/d9cabbfd8c7f