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

html-css015

请教用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里面

}

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

1.一个完整的后台管理系统包括新闻管理模块，登陆注销模块，会员管理模块，商品展示发布模块等。

2.HTML5还是HTML。只是版本在升级，增加了一些支持web2.0的标签而已。还是一种静态纯标记语言。

3.一个基本的后台管理系统除了涉及到到前面的几大模块之后最主要的是数据库的写入。这个HTML5无法做到的。只能用一些开发语言。如ASP，.net，PHP之类的。