概况总览部分的思路是一个大盒子开启 flex
布局,包含两个子盒子,分布设置 flex:1
平均各占一份,两个子盒子里面包含 a
标签开启 flex
布局,竖排显示,居中。
<div class="main">
<div class="overview">
<!--左边部分-->
<div class="left">
<a href="#">
<span><img src="./images/vip.png" alt=""></span>
<span>会员中心</span>
</a>
<a href="#">
<span><img src="./images/vip.png" alt=""></span>
<span>会员中心</span>
</a>
<a href="#">
<span><img src="./images/vip.png" alt=""></span>
<span>会员中心</span>
</a>
</div>
<!--右边部分-->
<div class="right">
<a href="#">
<span>12</span>
<span>优惠券</span>
</a>
<a href="#">
<span>435</span>
<span>金额</span>
</a>
<a href="#">
<span>65</span>
<span>消费</span>
</a>
</div>
</div>
</div>
样式:
.main .overview{
background-color: #fff;
display: flex;
padding: 20px 0px;
}
.main .overview div{
flex: 1;
display: flex;
justify-content: space-evenly;
padding: 10px 0px 12px;
}
.main .overview .left{
border-right: 1px solid #f4f4f4;
}
.main .overview div a{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.main .overview .left a span:nth-child(1){
width: 40px;
height: 32px;
margin-bottom: 10px;
}
.main .overview div a span img{
width: 100%;
height: 100%;
}
.main .overview .right span:nth-child(1){
font-size: 28px;
color: #e05e2f;
}
效果:
2 条评论
作者以非凡的视角解读平凡,让文字焕发出别样的光彩。
测试评论