旅游网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旅游网</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px;
max-width: 540px;
margin: 0 auto;
}
header {
width: 100%;
height: 100px;
}
header img {
width: 100%;
height: 100%;
}
nav {
padding: 5px;
}
.row {
height: 90px;
width: 100%;
background-color: #ff697a;
border-radius: 8px;
display: flex;
margin-bottom: 5px;
}
.row3 {
flex: 1;
border-left: 1px solid #fff;
}
.row div:first-child {
border: 0;
}
.hotel {
display: flex;
flex-direction: column;
}
.hotel a {
display: block;
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:nth-child(1) {
border-bottom: 1px solid #fff;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
</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="#">WiFi电话卡</a>
</div>
<div class="row3 hotel">
<a href="#">购物▪外汇</a>
<a href="#">保险▪签证</a>
</div>
</div>
</nav>
</body>
</html>