ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
### 商品展示 说明:这个是“宫格三” 的内容是一样的! ![](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> ```