今天听老师讲解了，才理解了用数组来存放div的操作。算是模拟了一个数据库的操作。
<head>
<meta charset="UTF-8">
<title>Coding Coffee</title>
<style>
.bian{
width: 800px;
height: 300px;
clear:both;
margin:0 auto;
}
.img{
float:left;
width: 50%;
margin:0 auto;
}
.p{
float:right;
width: 50%;
}
p,h1,h2{
text-align:center;
}
</style>
</head>
<body>
<!--
<div class="bian">
<h1>Coding Coffee Menu</h1>
<div class="img">
<img src="../img/c2.jpg">
</div>
<div class="p">
<h2>蓝山咖啡</h2>
<p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
</div>
</div>
-->
<script type="text/javascript">
var items=[{product:'蓝山咖啡',img_url:'../img/c2.jpg',descreption:'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯'},
{product:'蓝山咖啡',img_url:'../img/c2.jpg',descreption:'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯'},
{product:'蓝山咖啡',img_url:'../img/c2.jpg',descreption:'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯'},
{product:'蓝山咖啡',img_url:'../img/c2.jpg',descreption:'源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯'}]
console.log(items);
for(var i=0;i<items.length;i++){
document.write('<div class="bian"><h1>Coding Coffee Menu</h1><div class="img"><img src="'+items[i]['img_url']+'"></div>');
document.write('<div class="p"><h2>'+items[i]['product']+'</h2>');
document.write('<p>'+items[i]['descreption']+'</p></div></div>');
}
</script>
</body>
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
