# 宮格
[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