# 商品列表页
![](https://box.kancloud.cn/2016-08-25_57beacf0dc55a.png)
相关代码如下:
```
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
<style type="text/css">
.slider {
margin-bottom: 0;
}
.slider img {
width: 100%;
height: 120px;
display: inherit;
}
.aui-grid-sixteen:after {
border:none;
}
.aui-grid-sixteen li:after {
border:none;
}
.aui-grid-sixteen li .aui-iconfont {
color: #ffffff;
width: 38px;
height: 38px;
line-height: 38px;
border-radius: 50%;
font-size: 20px;
}
p.goods-title {
font-size: 1em;
color: #333;
}
p.goods-info {
font-size: 12px;
color: #999;
}
.aui-line-x {
margin: 5px 0;
}
.aui-line-x:after {
border-color: #ddd;
}
.goods-price {
font-size: 0.875em;
}
.goods-price strong {
margin:0 5px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="aui-content slider">
<img src="./image/d5.png" />
</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-profilefill aui-bg-success"></span>
<p>全部商品</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-creativefill aui-bg-warning"></span>
<p>积分兑换</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-apps aui-bg-danger"></span>
<p>新品促销</p>
</li>
<li class="aui-col-xs-3 aui-text-center">
<span class="aui-iconfont aui-icon-countdownfill aui-bg-info"></span>
<p>热门推荐</p>
</li>
</ul>
</div>
<div class="aui-content">
<ul class="aui-list-view aui-grid-view">
<li class="aui-list-view-cell aui-img aui-col-xs-6" 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>
<p class="goods-info">
共售出<span class="aui-text-danger">88</span>件
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img aui-col-xs-6" 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>
<p class="goods-info">
共售出<span class="aui-text-danger">88</span>件
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img aui-col-xs-6" 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>
<p class="goods-info">
共售出<span class="aui-text-danger">88</span>件
</p>
</div>
</li>
<li class="aui-list-view-cell aui-img aui-col-xs-6" 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>
<p class="goods-info">
共售出<span class="aui-text-danger">88</span>件
</p>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
api.parseTapmode();
}
function openGoods(){
var delay = 0;
if(api.systemType != 'ios'){
delay = 300;
}
api.openWin({
name: 'goods_show_win',
url: 'goods_show_win.html',
bounces: false,
delay:delay
});
}
</script>
</html>
```
- 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