css文件
body{
background-color: #F4F4F4;
}
.nav{
width:100%;
height: 75px;
background-color: #ff4433;
display: flex;
}
.arrow,.search{
width:75px;
height: 75px;
}
.arrow{
background-image: url(img/百度箭头.jpg);
background-repeat: no-repeat;
background-size: 50px 70px;
}
.search{
background-image: url(img/百度搜索.jpg);
background-repeat: no-repeat;
background-size: 50px 70px;
}
.title{
height: 75px;
flex-grow: 1;
font-size:20px;
color:#fff;
line-height: 75px;
text-align: center;
}
.food{
display: flex;
background-color: #fff;
height:200px;
align-items: center;
}
.food div{
width:40%;
min-width:50px;
}
.menu{
background-color: #fff;
}
.menu>div{
display: flex;
}
.menu>div>div{
flex-grow:1;
border-right:1px solid #f2f4f5;
margin: 30px;
}
.menu>div:first-child{
border-bottom:solid 1px #F2F4F5 ;
}
.menu>div>div:last-child{
border-right: none;
}
html文件
<html>
<head>
<meta charset="utf-8">
<title>百度周边案例 弹性盒子</title>
<link rel="stylesheet" href="2.css" />
</head>
<body>
<div class="nav">
<div class="arrow"></div>
<div class="title"><span>周边<span></div>
<div class="search"></div>
</div>
<div class="food">
<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
</div>
<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
</div>
<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
</div>
<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
</div>
<div align="center"><img src="img/百度美食.jpg" alt="" /><br />
</div>
</div>
<div class="menu">
<div id="div01" >
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
</div>
<div >
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
<div>
<img src="img/百度小吃.jpg" alt="" />
</div>
</div>
</div>
</body>
</html>
效果图: