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

html-css022

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

你先给一个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里面

}

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

左边动态从数据库中读出来所有的商品，然后点左边的时候，右边获到传过来的参数，一般来说是ID，然后根据传过来的ID查出相应的产品信息

SELECT * FROM 产品表 WHERE 产品ID=传来的ID

然后在该显示的地方显示出来

DIV只是页面布局的一种方式

类似的开源代码有很多，你可以参考 ECShop、Magento等开源PHP项目的相关代码。

如果自己写的话，也不复杂，先取出数据，再编写CSS确定样式，最简单的办法，你可以找个某商品展示网页，看人家的html/CSS编写，照做也差不多了。