整理数组数据，模拟京东的商品列表

 

 

<script>
var arr = [
{
goodsImg:'https://img30.360buyimg.com/seckillcms/s140x140_jfs/t1/186995/37/12433/183771/60e7ffb3E1b78db87/c5696abfd650ef64.jpg.webp',
goodsname:'荣耀畅玩20 手机 老人机 学生智能机 【咨询加赠华为原装Type-C线】 幻夜黑 全网通(6G+128G)',
goodsoldprice:'1399',
goodsnowproce:'1029'
},
{
goodsImg:'https://img20.360buyimg.com/seckillcms/s140x140_jfs/t1/116335/26/233/214256/5e8998c4E3b5fc871/ec122a9622175d7e.jpg.webp',
goodsname:'【纯银999十二生肖七彩建盏】【配银饰鉴定证+礼盒+礼盒袋+收藏证书】天目釉原矿铁胎茶盏主人杯茶具茶 纯手工七彩盏-莲花纯银999',
goodsoldprice:'659',
goodsnowproce:'199'
},
{
goodsImg:'https://img12.360buyimg.com/seckillcms/s140x140_jfs/t1/182318/5/13135/123400/60e55430E14b60a71/070af11351a8de90.jpg.webp',
goodsname:'风味坐标 手撕牛肉干 400g(经典原味) 内蒙古锡林浩特特产 高蛋白休闲零食',
goodsoldprice:'229',
goodsnowproce:'69'
},
{
goodsImg:'https://img11.360buyimg.com/seckillcms/s140x140_jfs/t1/185818/10/12878/72765/60e41060Ed9ebc1a3/5fa7730180a53328.jpg.webp',
goodsname:'蔬果园蓝风铃香水洗衣液除菌液母婴可用持久留香酵素英式香氛香味洗衣液洁净家庭组合套装 蓝风铃2kg*3+500g*5袋+留香珠18g*2',
goodsoldprice:'159',
goodsnowproce:'119'
},
];
// 遍历数组，输出标签
for(var i=0;i<arr.length;i++){
document.write('<li>');
document.write('<img src="' + arr[i].goodsImg + '">');
document.write('<h4>'+arr[i].goodsname+'</h4>');
document.write('<b>'+arr[i].goodsnowproce+'</b>');
document.write('<span>'+arr[i].goodsoldprice+'</span>');
document.write('</li>');
}
</script>
<style>
li{
list-style-type: none;
padding: 0;
margin: 0;
width: 140px;
height: 190px;
border:1px solid #000;
float:left;
margin:0 10px;
}
li h4{
width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0;
margin: 0;
}
</style>