微信页面设计weui源代码（3）——九宫格grid

自己看源代码，实现了微信九宫格页面实现，效果如图所示：

代码实现如下：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>安规培训系统主页面</title>
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/example.css"/>
     <script src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
    <script src="js/weui.min.js"></script>
    <script src="js/example.js"></script>
</head>
<body ontouchstart style="width:100%;max-width:800px;margin:0 auto;
    background:#eeeeee;top:0px; bottom:0px; left:0px; right:0px;
    min-width:320px;">
   <div class="container" id="container"></div>
    <script type="text/html" id="tpl_home">
<div class="page">
    <div class="page__hd">
         <h1 class="page__title">
            <img src="./image/guojiadianwang.jpg" alt="WeUI" width="100%" max-width="800px" style="margin: 0 auto" />
        </h1>
    </div>
    <!--九宫格主页面-->
    <div class="weui-grids">
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./image/icon_nav_panel.png" alt="">
            </div>
            <p class="weui-grid__label">验证</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-grid__label">学习</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_flow.png" alt="">
            </div>
            <p class="weui-grid__label">练习</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_icons.png" alt="">
            </div>
            <p class="weui-grid__label">考试</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_search_bar.png" alt="">
            </div>
            <p class="weui-grid__label">查询</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_button.png" alt="">
            </div>
            <p class="weui-grid__label">记录</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_toast.png" alt="">
            </div>
            <p class="weui-grid__label">活动</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./images/icon_nav_article.png" alt="">
            </div>
            <p class="weui-grid__label">竞赛</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="./image/icon_nav_dialog.png" alt="">
            </div>
            <p class="weui-grid__label">通告</p>
        </a>
    </div>
    <div class="page__ft">
        <a href="javascript:home()"><img src="./images/icon_footer.png" /></a>
    </div>
</div>
    </script>
</body>
</html>

 

posted on 2017-02-24 15:20  小企鹅ITgo  阅读(1276)  评论(0)  编辑  收藏  举报