<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
/*适配头*/
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />
<title></title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
img{
display: block;
width: 100%;
}
.nav .item{
height: 90px;
display: flex;
background-color: deeppink;
margin: 10px;
border-radius: 15px;
}
.nav .item:nth-child(2){
background-color: mediumseagreen;
}
.nav .item:nth-child(3){
background-color: #daa520;
}
.nav .item:nth-child(4){
background-color: #e92322;
}
.item .pub{
flex: 1;
border-right: 1px solid #fff;
/*border-bottom: 1px solid #fff;*/
}
.item .sub{
flex: 2;
}
.item .sub a{
width: 50%;
float: left;
text-align: center;
line-height: 45px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
/*盒子内减*/
box-sizing: border-box;
}
.nav .item:nth-child(4) .sub a{
width: 33.333%;
}
.extre{
display: flex;
}
.extre a{
flex: 1;
}
.footer .f-nav{
display: flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.footer .f-nav li{
flex: 1;
text-align: center;
line-height: 70px;
}
.footer p{
text-align: center;
font-size: 12px;
color: #999;
line-height: 60px;
}
</style>
<body>
<div class="layout">
<div class="timg">
<a href="#"><img src="img/timg.jpg"></a>
</div>
<!--导航结构-->
<nav 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="pub"></div>
<div class="sub">
<a href="javascript:;">海外酒店</a>
<a href="javascript:;">团购</a>
<a href="javascript:;">特惠酒店</a>
<a href="javascript:;">客栈公寓</a>
<a href="javascript:;">客栈公寓</a>
<a href="javascript:;">客栈公寓</a>
</div>
</div>
</nav>
<!--其他-->
<div class="extre">
<a href="#"><img src="img/extra_2.jpg"/></a>
<a href="#"><img src="img/extra_1.jpg"/></a>
</div>
<div class="footer">
<ul class="f-nav">
<li>客户端</li>
<li>关于</li>
<li>联系我们</li>
</ul>
<p><a href="">网站地图</a>|<a href="">English</a>|<a href="">电脑版</a></p>
<p>@2015 携程在手，说走就走</p>
</div>
</div>
</body>
</html>
本文只做学习交流，不做他途