# 宫格
[TOC]
### 九宫格
代码如下：
```
<div class="aui-content">
<ul class="aui-grid-nine">
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-edit aui-text-primary"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-emoji aui-text-danger"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-favor aui-text-warning"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-phone aui-text-pink"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-taxi aui-text-dark"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-camera aui-text-info"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-like aui-text-blue"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-deliver aui-text-danger"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-4 aui-text-center">
<span class="aui-iconfont aui-icon-evaluate aui-text-warning"></span>
<p>栏目</p>
</li>
</ul>
</div>
```
### 十六宫格
相关代码如下：
```
<div class="aui-content">
<ul class="aui-grid-sixteen">
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-pay aui-text-primary"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-send aui-text-danger"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-shop aui-text-warning"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-ticket aui-text-pink"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-cascades aui-text-dark"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-discover aui-text-info"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-scan aui-text-blue"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-settings aui-text-danger"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-form aui-text-warning"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-pic aui-text-warning"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-filter aui-text-pink"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-footprint aui-text-dark"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-home aui-text-danger"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-profile aui-text-warning"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-qrcode aui-text-pink"></span>
<p>栏目</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-service aui-text-dark"></span>
<p>栏目</p>
</li>
</ul>
</div>
```
### 1、样式一
说明：首先采用的是 `div` ，其次用 css 的 `aui-col-xs-4`。
父级采用 `aui-content`。
代码如下 ：
```
<style>
.topmenu {background: #e74c3c;overflow: hidden;padding: 10px 0;margin-bottom: 0;}
.topmenu .aui-iconfont,
.topmenu p {color: #ffffff;}
.topmenu .aui-iconfont {font-size: 1.6em;}
</style>
<div class="aui-content topmenu aui-text-center">
<div class="aui-col-xs-4">
<span class="aui-iconfont aui-icon-write"></span>
<p>签到</p>
</div>
<div class="aui-col-xs-4">
<span class="aui-iconfont aui-icon-list"></span>
<p>订单</p>
</div>
<div class="aui-col-xs-4">
<span class="aui-iconfont aui-icon-sponsor"></span>
<p>提现</p>
</div>
</div>
```
### 2、样式二
说明：首先采用的是 `ul` 和 `li` ，其实采用 css 的 `aui-grid-sixteen` 和 `aui-col-xs-3`。
父级采用 `aui-content`。
代码如下：
```
<div class="aui-content">
<ul class="aui-grid-sixteen">
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目一')">
<span class="aui-iconfont aui-icon-form aui-text-info"></span>
<p>栏目一</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目二')">
<span class="aui-iconfont aui-icon-creativefill aui-text-success"></span>
<p>栏目二</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目三')">
<span class="aui-iconfont aui-icon-similar aui-text-warning"></span>
<p>栏目三</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目四')">
<span class="aui-iconfont aui-icon-countdownfill aui-text-info"></span>
<p>栏目四</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目五')">
<span class="aui-iconfont aui-icon-taoxiaopu aui-text-danger"></span>
<p>栏目五</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目六')">
<span class="aui-iconfont aui-icon-shopfill aui-text-info"></span>
<p>栏目六</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目七')">
<!-- <img src="../image/muchang.png" class="muchang" /> -->
<span class="aui-iconfont aui-icon-activityfill aui-text-success"></span>
<p>栏目七</p>
</li>
<li class="aui-col-xs-3 aui-text-center" tapmode onclick="openClassify('news','栏目八')">
<span class="aui-iconfont aui-icon-all aui-text-warning"></span>
<p>栏目八</p>
</li>
</ul>
</div>
```
### 3、样式三
说明：
首先采用的是 `ul` 和 `li` ，
`ul`采用的暗 `aui-list-view` 和 `aui-grid-view` ，
`li`采用的是 `aui-list-view-cell aui-img aui-col-xs-4` 。
代码如下：
```
<div class="aui-content box">
<div class="aui-line-x"></div>
<div class="box-title">今日特惠</div>
<ul class="aui-list-view aui-grid-view">
<li class="aui-list-view-cell aui-img aui-col-xs-4" tapmode onclick="openGoods()">
<img class="aui-img-object" src="../../../image/demo1.png">
<div class="aui-img-body aui-text-left">
<!-- 商品名称商品名称商品名称商品名称 -->
<p>
<span class="goods-price aui-text-danger">¥<strong>88.88</strong>元</span>
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img aui-col-xs-4" tapmode onclick="openGoods()">
<img class="aui-img-object" src="../../../image/demo2.png">
<div class="aui-img-body aui-text-left">
<!-- 商品名称商品名称商品名称商品名称 -->
<p>
<span class="goods-price aui-text-danger">¥<strong>88.88</strong>元</span>
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img aui-col-xs-4" tapmode onclick="openGoods()">
<img class="aui-img-object" src="../../../image/demo3.png">
<div class="aui-img-body aui-text-left">
<!-- 商品名称商品名称商品名称商品名称 -->
<p>
<span class="goods-price aui-text-danger">¥<strong>88.88</strong>元</span>
</p>
</div>
</li>
</ul>
<div class="aui-line-x"></div>
</div>
```
- APP模块
- 欢迎页
- 头部模块
- 底部模块
- 图文列表
- 商品展示
- 文字列表
- 内容页一
- 评论页
- N宫格
- 获得上一级的栏目名称
- 搜索模块
- 图标
- 幻灯模块
- 消息页
- 个人中心
- 个人中心—我的收藏
- 个人中心—资料修改
- 个人中心—我的钱包（账户）
- 咨询页面
- APP模板
- 注册 页面一
- 注册 页面二
- 登录 页面一
- 登录 页面二
- 忘记密码 页面一
- 会员中心 首页一
- 会员中心 首页二
- 会员中心 首页三
- 会员中心 资料修改
- 申请审核步骤
- 商品订单一
- 游戏页面
- 新闻列表页
- 图文列表页
- 商品列表页
- 商品详情页
- 聊天
- 消息列表
- 聊天界面
- 发布需求
- 前端框架
- CSS Framework
- trim 字符处理
- dom 选择器
- 样式
- evt 事件
- 选择元素
- 属性
- 文本
- 位置
- json
- 设置
- 提示
- AJAX
- storage 本地存储
- API对象
- 常用函数
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用图片
- asd