注釋很詳細(xì)，直接上代碼

涉及內(nèi)容：

1. view和text標(biāo)簽的使用
2. 類的使用
3. flex布局
4. 水平方向上均勻分布子元素
5. 垂直居中對齊子元素
6. 字體大小
7. 文字顏色
8. 底部邊框的寬和顏色

源碼：

index.wxml

<view class="navs"><text class="active">精選</text><text>手機(jī)</text><text>食品</text><text>內(nèi)衣</text><text>生鮮</text><text>母嬰</text>
</view>

index.wxss

.navs{display: flex;justify-content: space-evenly;background-color: pink;height:40px;align-items: center;font-size: 14px;
}.active{color: #37b626;border-bottom: 1px solid #00b26a;
}

效果演示：

下一篇