版权声明：转载本文，请附录原文地址，如果错误，请联系我。 https://blog.csdn.net/qq_19880197/article/details/86517103
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>
<img src=img/1.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>CSS部分
*{
margin:0;
padding:0;
}
body{
min-width:320px;
max-width:540px;
margin:0 auto;
}
ul{
list-style:none;
}
header{
height: 100px;
width: 100%;
}
header img{
width: 100%;
height: 100%;
}
nav{
padding:5px;
}
nav .row{
height: 90px;
width: 100%;
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;
border-left:1px solid #fff;
}
.row div:first-child{
border:0;
}
.hotel{
display: flex;
flex-direction: column;
}
.hotel a{
flex:1;
text-align: center;
line-height: 45px;
text-decoration: none;
color: #fff;
font-size:14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.hotel a:first-child{
border-bottom:1px solid #fff;
}