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

最新推荐文章于 2023-08-02 12:54:35 发布

weixin_30260399

最新推荐文章于 2023-08-02 12:54:35 发布

阅读量604

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/snowwang/p/6438717.html

版权

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

代码实现如下：

<!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>

转载于:https://www.cnblogs.com/snowwang/p/6438717.html

weixin_30260399

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信页面设计weui源代码（3）——九宫格grid

自己看源代码，实现了微信九宫格页面实现，效果如图所示：代码实现如下：<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...
复制链接

扫一扫