请教用html的li标签如何做到商品展示，例如京东的商品展示是用的li标签，一排显示4个，循环很多排？

你先给一个div用来包住内容的，设置宽高，然后在div放一个ul，ul里放4个li，li的宽度就是25%，或者可以写具体的值

<ul>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>这是一杯咖啡</p>

<p>¥34 : 00</p>

</li>

</ul>

css：

ul{

width: 100%

}

li{

list-style:none

width: 20%

height:300px

border:1px solid #000

float:left

}

我是设置的5个就可以看到换行的效果了，如果觉得样式可以就在js里设置一个数组，复制一个li的内容，然后把li全部注释，然后在js里写循环遍历

var list=[

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},

{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'}

]

var html=""//声明一个空变量来接收拼接的内容

for(var i of list){

//拼接内容

html+=`

<li>

<img src="${i.img}" alt="" />

<p>${i.title}</p>

<p>¥<span>${i.price}</span>: 00</p>

</li>

`

$("ul").html(html)//把遍历的内容添加到ul里面

}

大概就是这样，不知道你看不看得懂

给你两种方案，视你个人能力选择吧。

1.用ajax，把左边和右上固定好，下方用div或其他套上，根据ajax与后台的处理，把回显内容送到

下方div

2.用iframe，把左边和右上写好，下方用iframe套上，让左边点击后的页面在下方显示

建模。用3DMAX/MAYA等建模，再上传到iCreaotr模型网就可以拿到嵌入链接，可以嵌入到网页直接放带动画的3d模型，而且自带交互。也就是说可以鼠标触发反应，自己拖动模型旋转、放大缩小，比单纯的视频/动图只有播放暂停的选项要好很多。效果好能任意展示产品各个角度缺点是建模成本较高

图片拼接。对产品进行360度或720度拍摄，然后通过flash或其他3D自动成像软件合成出flash、gif或html5格式动画。优点是成本低方便，缺点是只能360度或者720度，不能任意角度观看。

---