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

请教用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、其次围绕盈利模式和市场份额进行分析和解答。

3、最后将客户群体,和遇到的问题与其解决方法进行总结即可。

hot 或new在导航上会动这种是PS里先设计GIF动态图片,然后再安装到店铺中,京东现在导航是设计1920x40px,你就按这个尺寸在PS里设计好动态样式的图片,然后加上超链接,你如果要全屏代码再用疯狂的美工京东装修助手生成个店招上使用的全屏代码,这样用小一点分辨率的电脑看就会居中了。希望给帮到你~


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7045069.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存