### 商品展示
说明:这个是“宫格三” 的内容是一样的!
![](https://box.kancloud.cn/2016-08-25_57beacf1a36d3.png)
说明:
首先采用的是 `ul` 和 `li` ,
`ul`采用的暗 `aui-list-view` 和 `aui-grid-view` ,
`li`采用的是 `aui-list-view-cell aui-img aui-col-xs-4` 。
代码如下:
```
<style>
.box-title {
margin: 15px 10px 5px 10px;
/*margin-bottom: 5px;*/
height: 20px;
line-height: 20px;
border-left: 5px solid #ff9900;
color: #666;
font-weight: 700;
padding-left: 10px;
}
.box .aui-list-view {
margin-bottom: 0;
}
.aui-list-view i.aui-iconfont {
margin-right: 0;
}
</style>
<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/demo.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/demo.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/demo.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