这一节课程我们来看下

就做成这个页面，大家有哪些实现方式，其中图片用到了字体图标

我们设计这样设计，首先这样设计外层用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 盒子塌陷问题， 字体图标相当于 文字处理

扫描二维码关注公众号，回复： 11700963 查看本文章