新的布局方式，适合移动端布局，仅实现前端页面，无具体功能
页面效果（缩放后）
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="font/iconfont.css">
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 955px;
height: 1420px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
/*header设置*/
header {
height: 124px;
background-color: #242a3a;
display: flex;
color: white;
}
header i {
width: 118px;
height: 124px;
line-height: 124px;
text-align: center;
font-size: 48px !important;
}
header span {
flex: 1;
height: 124px;
line-height: 124px;
font-size: 40px;
}
/*footer设置*/
footer {
height: 128px;
background-color: gray;
display: flex;
}
footer div {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
color: #acadaf;
background-color: white;
}
footer div:hover {
color: #06a9ee;
}
footer div i {
height: 66px;
line-height: 66px;
text-align: center;
font-size: 58px !important;
}
footer div span {
height: 36px;
line-height: 36px;
text-align: center;
font-size: 28px;
}
/*section设置*/
section {
flex: 1;
background-color: #f4f5f9;
}
.main {
display: flex;
height: 278px;
background-color: #242a3a;
justify-content: space-around;
align-items: center;
}
.main div {
width: 120px;
height: 168px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
}
.main div i {
font-size: 110px;
text-align: center;
}
.main div span {
font-size: 32px;
text-align: center;
}
.list {
display: flex;
flex-wrap: wrap;
}
.list div {
width: 25%;
height: 208px;
border: 1px solid gainsboro;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
}
.list div i {
height: 77px;
line-height: 77px;
text-align: center;
font-size: 60px;
}
.list div span {
height: 61px;
line-height: 61px;
text-align: center;
font-size: 30px;
}
.pic {
height: 208px;
margin-top: 25px;
background-image: url("pic.png");
background-size: contain;
}
</style>
</head>
<body>
<div class="box">
<header>
<i class="iconfont icon-btn_zixun"></i>
<span>账单</span>
<i class="iconfont icon-geren2"></i>
<i class="iconfont icon-bangzhu"></i>
<i class="iconfont icon-jia"></i>
</header>
<section>
<div class="main">
<div>
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
<div>
<i class="iconfont icon-fukuan1"></i>
<span>付款</span>
</div>
<div>
<i class="iconfont icon-weidaqiadewenjianjia"></i>
<span>卡券</span>
</div>
<div>
<i class="iconfont icon-fenleiorguangchangorqitatianchong"></i>
<span>其他</span>
</div>
</div>
<div class="list">
<div>
<i class="iconfont icon-canyin"></i>
<span>餐饮</span>
</div>
<div>
<i class="iconfont icon-zhusu"></i>
<span>住宿</span>
</div>
<div>
<i class="iconfont icon-jingdian"></i>
<span>景点</span>
</div>
<div>
<i class="iconfont icon-daohang"></i>
<span>导航</span>
</div>
<div>
<i class="iconfont icon-dizhi"></i>
<span>地址</span>
</div>
<div>
<i class="iconfont icon-gongjiaoche"></i>
<span>公交车</span>
</div>
<div>
<i class="iconfont icon-jichengche"></i>
<span>计程车</span>
</div>
<div>
<i class="iconfont icon-feiji"></i>
<span>飞机</span>
</div>
<div>
<i class="iconfont icon-gaoxiaofei"></i>
<span>消费</span>
</div>
<div>
<i class="iconfont icon-yuding"></i>
<span>预定</span>
</div>
<div>
<i class="iconfont icon-duogouwu"></i>
<span>购物</span>
</div>
<div>
<i class="iconfont icon-xitongcaidan"></i>
<span>菜单</span>
</div>
</div>
<div class="pic"> </div>
</section>
<footer>
<div>
<i class="iconfont icon-geren"></i>
<span>个人</span>
</div>
<div>
<i class="iconfont icon-yinhangka"></i>
<span>账户</span>
</div>
<div>
<i class="iconfont icon-fenleiorguangchangorqita"></i>
<span>分类</span>
</div>
<div>
<i class="iconfont icon-zhuye"></i>
<span>主页</span>
</div>
</footer>
</div>
</body>
</html>