这里写自定义目录标题
html弹性盒模型案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>百度周边</title>
<style>
*{
margin:0;
padding:0;
}
body{
background-color: #f2f4f5;
text-align: center;
}
header:first-of-type{
height: 75px;
background-color: #FF4433;
display: flex;
}
header div:first-of-type,header div:last-of-type{
width: 75px;
height: 75px;
background: url("images/百度周边_03.png") no-repeat center;
}
header div:last-of-type{
background-image: url("images/百度周边_08.png");
}
header div:nth-child(2){
flex-grow: 1;
color: #fff;
line-height: 75px;
font-size: 18px;
}
header div:nth-child(2) >img{
margin-top: -6px;
vertical-align: middle;
}
nav{
display: flex;
background-color: #fff;
padding: 45px 0;
}
nav div{
flex-grow: 1;
}
nav div img{
width: 40%;
min-width: 50px;
margin-bottom: 10px;
}
article>div:first-of-type{
width: 100%;
background-color: #fff;
margin-top: 20px;
}
article>div:first-of-type>div{
display: flex;
padding: 30px 0;
}
article>div:first-of-type>div>div{
flex-grow: 1;
border-right: 1px solid #f2f4f5;
}
article>div:first-of-type>div>div:last-child{
border-right: none;
}
article>div:first-of-type>div:first-of-type {
border-bottom: 1px solid #f2f4f5;
}
article img{
margin-bottom: 5px;
}
footer>div{
width: 100%;
background-color: #fff;
margin-top: 20px;
overflow: hidden;
padding-bottom: 30px;
}
footer>div>div:first-of-type{
width: 90%;
margin: 0 auto;
}
div>h2:only-of-type{
text-align: left;
height: 91px;
line-height: 91px;
font-weight: normal;
}
footer>div img{
float: left;
width: 33.33%;
}
</style>
</head>
<body>
<header>
<div class="arrow"></div>
<div class="title">
<img src="images/百度周边_05.png" alt=""/>
<span>发现周边服务</span>
</div>
<div class="search"></div>
</header>
<nav>
<div>
<img src="images/百度周边_14.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_16.png" alt=""/>
<br/>
风景
</div>
<div>
<img src="images/百度周边_18.png" alt=""/>
<br/>
酒店
</div>
<div>
<img src="images/百度周边_20.png" alt=""/>
<br/>
休闲娱乐
</div>
<div>
<img src="images/百度周边_22.png" alt=""/>
<br/>
车主服务
</div>
</nav>
<article>
<div>
<div class="top">
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
</div>
<div class="bottom">
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
<div>
<img src="images/百度周边_30.png" alt=""/>
<br/>
美食
</div>
</div>
</div>
</article>
</article>
<footer>
<div class="forU">
<div class="wrap">
<h2>为你优选</h2>
<div class="img_box">
<img src="images/百度周边_66.png" alt=""/>
<img src="images/百度周边_66.png" alt=""/>
<img src="images/百度周边_66.png" alt=""/>
</div>
</div>
</div>
</footer>
</body>
</html>
效果
当浏览器宽度改变时
源代码下载地址:百度周边响应式布局