移动端&pc端九宫格页面_pc移动端九宫格-程序员宅基地

根据table表格和jqweui框架写的九宫格
jqweui框架开发学习地址：http://jqweui.com/
效果图：
在这里插入图片描述

代码如下：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/12/4
  Time: 13:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="../js/jquery-2.1.1.min.js"></script>
    <script language="javascript" src="../js/LodopFuncs.js"></script>
    <script src="../js/CLodopfuncs.js"></script>

    <script src="../js/jquery-weui.min.js"></script>
    <link rel="stylesheet" href="../css/jquery-weui.css">
    <link rel="stylesheet" href="../css/jquery-weui.min.css">
    <style>
        td{
            text-align: center;
            border: 1px solid #dbdbdb;

            box-sizing: border-box;
            border-collapse:separate;
            margin: 0;padding: 0;


        }
        img{
            text-shadow: black 5px 3px 3px;
        }
        p{
            margin-top: 1px;
            color: #2c2c2c;
            text-decoration: #ffffff;
            /*text-shadow: black 5px 3px 3px;*/
        }
        a{text-decoration: none;}
    </style>
</head>
<body >
<div class="weui-grids" style="width: 100%;margin-top: 20%" >
    <table style="width: 100%;height: 55%;">
        <tr>
            <td style="width: 33%"><a href="" class="weui-grid js_grid" >
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-footer__text">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
        <tr>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
        <tr>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
            <td style="width: 33%"><a href="#" class="weui-grid js_grid">
                <div class="weui-grid__icon">
                    <img src="http://jqweui.com/dist/demos/images/icon_nav_button.png" alt="">
                </div>
                <p class="weui-grid__label">
                    Button
                </p>
            </a></td>
        </tr>
    </table>
</div>
<script>

</script>
</body>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-weui.js"></script>
</html>

本文链接：https://blog.csdn.net/qq_39112803/article/details/85279436

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

源代码图纸文档防泄密场景方案分析-程序员宅基地

文章浏览阅读161次，点赞5次，收藏3次。财务数据、员工信息、工资信息、客户和业务数据等被员工非法获取、外泄

Linux查磁盘大小命令,linux系统查看磁盘空间的命令是什么-程序员宅基地

文章浏览阅读2k次。linux系统查看磁盘空间的命令是【df -hl】，该命令可以查看磁盘剩余空间大小。如果要查看每个根路径的分区大小，可以使用【df -h】命令。df命令以磁盘分区为单位查看文件系统。本文操作环境：red hat enterprise linux 6.1系统、thinkpad t480电脑。(学习视频分享：linux视频教程)Linux 查看磁盘空间可以使用 df 和 du 命令。df命令df 以磁..._df -hl

Office & delphi_range[char(96 + acolumn) + inttostr(65536)].end[xl-程序员宅基地

文章浏览阅读923次。uses ComObj;var ExcelApp: OleVariant;implementationprocedure TForm1.Button1Click(Sender: TObject);const // SheetType xlChart = -4109; xlWorksheet = -4167; // WBATemplate xlWBATWorksheet = -4167_range[char(96 + acolumn) + inttostr(65536)].end[xlup]

若依 quartz 定时任务中 service mapper无法注入解决办法_ruoyi-quartz无法引入ruoyi-admin的service-程序员宅基地

文章浏览阅读2.3k次。上图为任务代码，在任务具体执行的方法中使用，一定要写在方法内使用SpringContextUtil.getBean()方法实例化Spring service类下边是ruoyi-quartz模块中util/SpringContextUtil.java(已改写)import org.springframework.beans.BeansException;import org.springframework.context.ApplicationContext;import org.s..._ruoyi-quartz无法引入ruoyi-admin的service

CentOS7配置yum源-程序员宅基地

文章浏览阅读2w次，点赞10次，收藏77次。yum，全称“Yellow dog Updater, Modified”，是一个专门为了解决包的依赖关系而存在的软件包管理器。可以这么说，yum 是改进型的 RPM 软件管理器，它很好的解决了 RPM 所面临的软件包依赖问题。yum 在服务器端存有所有的 RPM 包，并将各个包之间的依赖关系记录在文件中，当管理员使用 yum 安装 RPM 包时，yum 会先从服务器端下载包的依赖性文件，通过分析此文件从服务器端一次性下载所有相关的 RPM 包并进行安装。_centos7配置yum源