弹性盒模型_百度周边响应式布局

这里写自定义目录标题html弹性盒模型案例

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>

效果
弹性盒模型_百度周边响应式布局
当浏览器宽度改变时
弹性盒模型_百度周边响应式布局
源代码下载地址:百度周边响应式布局

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

弹性盒模型_百度周边响应式布局

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 弹性盒模型_百度周边响应式布局
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏