就做成这个页面,大家有哪些实现方式,其中图片用到了字体图标
我们设计这样设计,首先这样设计外层用fle x布局
然后四个子项
.nav{
display: flex;
align-items: center;
// background-color: pink;
.nav_item{
box-sizing: border-box;
width: 25%;
text-align: center;
overflow:hidden;
// background-color: $shop-color;
//写布局的时候,遇到写字体库的时候,在scss 中,就用我这种写法
// 字体库相当一个行内元素,你把它当成文本处理就行了
// view 是块状元素,可以宽高, line-height 可以让文字垂直居中,也可以设置,字体之间的间距
// 在 HBuild X 中,写样式时,要不停的刷新看看,写一点看一点,要参考人家的代码
//模仿和学习
.iconfont{
margin: 10px auto;
width: 120rpx;
height: 120rpx;
border-radius: 90rpx;
line-height: 120rpx;
background-color: #CCC;
font-size: 32px;
}
text{
font-size: 16px;
}
}
}
我这个就是从外层写到里面一层
overflow去除margin 盒子塌陷问题, 字体图标相当于 文字处理