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

时间:2020-9-3 作者:admin


这里写自定义目录标题

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>

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。