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

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

<ul>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

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

</li>

<li>

<p>这是一杯咖啡</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'}

]

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

for(var i of list){

//拼接内容

html+=`

<li>

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

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

</li>

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

}

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

<html>

<head>

function cal() {

var appleVolum = Number(document.getElementById("appleVolum").value)

var bananaVolum = Number(document.getElementById("bananaVolum").value)

var pineappleVolum = Number(document.getElementById("pineappleVolum").value)

document.getElementById("msg").value = "共花费：" + (appleVolum * 10 + bananaVolum * 20 + pineappleVolum * 20)

}

</script>

</head>

<body>

苹果每斤10元，请输入您要购买的斤数：<input id="appleVolum"><br>

香蕉每斤20元，请输入您要购买的斤数：<input id="bananaVolum"><br>

菠萝每斤20元，请输入您要购买的斤数：<input id="pineappleVolum"><button onclick="cal()">我买</button><br>

信息:<input id="msg">

</body>

</html>

给你说下思路，

document.

getElementById

("top").rows.length可以获得top表的行数

document.getElementById("top").rows[0].cells.length可以获得top表的第一行的列数

document.getElementById("top").rows[0].cells[0].offsetWidth可获得top表第一行第一列的实际宽度，（注意，这个是只读的！）所以

for(var

i=0i

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7676993.html

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

发表评论

评论列表（0条）