<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里面
}
大概就是这样，不知道你看不看得懂
<!DOCTYPE><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width: 600px
height: auto
}
h1{
width: 100%
height: 100px
line-height: 100px
text-align: center
background: blue
font-size: 50px
margin: 0
color: white
}
p{
background: #9f9285
font-family: "Microsoft YaHei"
font-size: 16px
line-height: 30px
text-indent: 2em
text-align: justify
border-top: 6px solid orange
margin: 0
padding: 10px
}
span{
font-size: 20px
color: blue
text-decoration: underline
}
</style>
</head>
<body>
<div id="box">
<h1>网络鞋城经营模式简介</h1>
<p><span>互联网</span>提供了无限延伸的展示空间，可以容纳无限的商品及内容。在网络鞋城，消费者无论是购物还是查询，都不受时间和地域的任何限制。在消费者享受<span>“鼠标轻轻一点，精品尽在眼前”</span>的背后，是网络鞋城耗时5年修建的物流体系，全国库房面积达到5万平方米，提供货到付款服务的城市超过<span>350</span>个，并为联营上午开通货到付款服务</p>
</div>
</body>
</html>
请采纳，谢谢
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）