效果
代码
<div class="content-account">
<div>
<i></i>
<p>学习计划</p>
</div>
<div>
<i></i>
<p>我的练习</p>
</div>
</div>
.content-account {
display: flex;
& > div {
display: flex;
flex-direction: column;
align-items: center;
width: 1.2rem;
height: 0.95rem;
margin-right: 0.8rem;
position: relative;
p {
font-size: 0.3rem;
color: #666666;
position: absolute;
bottom: 0;
}
}
// 学习计划
& > div:nth-of-type(1) {
i {
width: 0.48rem;
height: 0.48rem;
background: url("../assets/logo-plan.png") no-repeat;
background-size: 100% auto;
}
}
// 我的练习
& > div:nth-of-type(2) {
i {
width: 0.38rem;
height: 0.38rem;
background: url("../assets/logo-practice.png") no-repeat;
background-size: 100% auto;
}
}
}