微信小程序（一）简单的结构及样式演示

注释很详细，直接上代码

涉及内容：

1. view和text标签的使用
2. 类的使用
3. flex布局
4. 水平方向上均匀分布子元素
5. 垂直居中对齐子元素
6. 字体大小
7. 文字颜色
8. 底部边框的宽和颜色

源码：

index.wxml

<view class="navs">
    <text class="active">精选</text>
    <text>手机</text>
    <text>食品</text>
    <text>内衣</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;
}

效果演示：

下一篇