weui Grid九宫格

2017年04月30日 09:53 | 1364次浏览 | 分类: 微信WeUI 作者原创 版权保护

本章节介绍微信weui基础组件中的Grid 九宫格样式案例中引用的微信weui的css样式库我已经上传到百度网盘了,地址 http://pan.baidu.com/s/1cvQlLc  ,大家可以下载下来进行引用,当然你也可以引用网络地址,但是有个弊端,微信weui的样式库更新比较频繁,可能将来某一天会失效,所以最好下载到本地使用。

一,引入css文件 

<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">

记得html设置成移动浏览

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">


二、Grid九宫格样式案例html代码

在<body></body>之间添加如下代码

<div class="page grid js_show">
    <div class="page__hd">
        <h1 class="page__title">Grid</h1>
        <p class="page__desc">九宫格---------V型知识库www.vxzsk.com原创</p>
    </div>
    <div class="weui-grids">
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
    </div>
</div>


三、效果

打开谷歌浏览器,设置手机网页模式浏览案例网页

weui九宫格

如上图所示,在这里我们模拟的是苹果6PLUS下的效果。


四、完整html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>www.vxzsk.comV型知识库</title>
 </head>
 <link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">

    

 <body>
<div class="page grid js_show">
    <div class="page__hd">
        <h1 class="page__title">Grid</h1>
        <p class="page__desc">九宫格---------V型知识库www.vxzsk.com原创</p>
    </div>
    <div class="weui-grids">
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
        <a href="javascript:;" class="weui-grid">
            <div class="weui-grid__icon">
                <img src="https://weui.io/images/icon_tabbar.png" alt="">
            </div>
            <p class="weui-grid__label">Grid</p>
        </a>
    </div>
</div>
    
  
 </body>

</html>


此文章本站原创,地址 http://www.vxzsk.com/879.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:weui gallery 下一篇:weui icon图标
^