• 九宫格

    九宫格

    九宫格是移动端常见的一种布局,常见的有微信钱包。

    九宫格布局最外层是一个样式类为 weui-grids,然后每一个宫格均为 weui-grid。当然,九宫格不一定非要是九个,多少个都行,建议至少三个。

    1. <!-- 九宫格 -->
    2. <div class="weui-grids">
    3. <!-- 第一个宫格 -->
    4. <a href="#" class="weui-grid">
    5. <!-- 图标 -->
    6. <div class="weui-grid__icon">
    7. <img src="" alt="">
    8. </div>
    9. <!-- 标签文字 -->
    10. <p class="weui-grid__label">标签文字</p>
    11. </a>
    12. <!-- 第二个宫格 -->
    13. <a href="#" class="weui-grid">
    14. <!-- 图标 -->
    15. <div class="weui-grid__icon">
    16. <img src="" alt="">
    17. </div>
    18. <!-- 标签文字 -->
    19. <p class="weui-grid__label">标签文字</p>
    20. </a>
    21. </div>

    九宫格 - 图1