<ul>
<li>
<img src="img/coffee.png" alt="" />
<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里设计好动态样式的图片,然后加上超链接,你如果要全屏代码再用疯狂的美工京东装修助手生成个店招上使用的全屏代码,这样用小一点分辨率的电脑看就会居中了。希望给帮到你~欢迎分享,转载请注明来源:内存溢出
评论列表(0条)