需求:仿旧版支付宝页面布局,实现一个常见的移动端页面
知识点:CSS弹性盒属性
思路:
-
设置弹性盒 display:flex
-
主轴改成y轴 flex-direction:column
-
主轴居中 justify-content:center
-
侧轴居中 align-items:center
<section>
<header>
<div style="color: #dca95d;">
<i class="iconfont icon-saoyisao"></i>
<span>扫一扫</span>
</div>
<div style="color: #3395d9;">
<i class="iconfont icon-erweima"></i>
<span>付款码</span>
</div>
</header>
<main>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-zhuanzhang" style="color: #5ba1ca;"></i><span>转账</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
<div><i class="iconfont icon-yuebao"></i><span>余额宝</span></div>
</main>
<footer>
<div><i class="iconfont icon-alipay"></i><span>支付宝</span></div>
<div><i class="iconfont icon-alipay"></i><span>支付宝</span></div>
<div><i class="iconfont icon-alipay"></i><span>支付宝</span></div>
<div><i class="iconfont icon-alipay"></i><span>支付宝</span></div>
</footer>
</section>
body,html{
width: 100%;
height: 100%;
}
section{
width: 100%;
height: 100%;
border: 1px solid #000;
}
header{
height: 150px;
display: flex;
background: #31384a;
}
header div{
width: 50%;
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
}
header div i{
font-size: 68px !important;
}
header div:nth-child(1){
border-right: 1px solid #ccc;
}
main{
height: 400px;
display: flex;
flex-wrap: wrap;
overflow: scroll;
}
main div{
width: 25%;
height: 108px;
box-sizing: border-box;
border: 1px solid #ccc;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #bbb;
font-size: 14px;
}
main div i{
font-size: 38px !important;
color: #dc6a22;
}
footer{
height: 50px;
background: #242a37;
display: flex;
}
footer div{
width: 25%;
height: 100%;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
footer div:hover{
color: #1f9de0;
background: #13181f;
}
最终实现效果(部分图标没更换):