根据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>