思路：

先搭HTML页面框架，写好CSS样式。将标签写上id，同类型标签构成一个数组，所以需要赋不同的id名。

遍历数组里每个对象，判断当前键是否等于我们要显示出来的标签，如果是就将其innerHTML出来。

 

 

全局代码：

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1</title>
</head>
<style>
	*{margin:0;padding: 0;}
	ul{list-style: none;}	div.wrap>ul{width:1300px;height: 200px;margin:100px auto;}
	div.wrap>ul>li{width:230px;height:200px;float:left;text-align: center;margin-left: 20px;}
	div.wrap>ul>li>h4{margin-bottom: 15px;}

</style>
<body>	<div class="wrap">
		<ul>
			<li>
				<img src="" alt="" id="img1">
				<h4 id="h1"></h4>
				<p id="p1"></p>
			</li>
			<li>
				<img src="" alt="" id="img2">
				<h4 id="h2"></h4>
				<p id="p2"></p>
			</li>
			<li>
				<img src="" alt="" id="img3">
				<h4 id="h3"></h4>
				<p id="p3"></p>
			</li>
			<li>
				<img src="" alt="" id="img4">
				<h4 id="h4"></h4>
				<p id="p4"></p>
			</li>
			<li>
				<img src="" alt="" id="img5">
				<h4 id="h5"></h4>
				<p id="p5"></p>
			</li>
		</ul>
	</div>

	<script>
		var arr = [
					{
						img:'images/1.png',
						title:'代码模块化',
						desc:'代码进行了完全模块化拆分,利于后期维护'
					},
					{
						img:'images/2.png',
						title:'超高拓展性',
						desc:'采用接口模式,提供了丰富的类库包含常用的的方法。'
					},
					{
						img:'images/3.png',
						title:'丰富的插件',
						desc:'包含20多种专门为编辑设计开发的插件,方便二次开发'
					},
					{
						img:'images/4.png',
						title:'超强的性能',
						desc:'webpack打包压缩，压缩代码不足100KB,code少,功能强！'
					},
					{
						img:'images/5.png',
						title:'功能可定制',
						desc:'基于layer的高拓展性,可轻松实现功能定制'
					}

				]			var img = [
						document.getElementById('img1'),
						document.getElementById('img2'),
						document.getElementById('img3'),
						document.getElementById('img4'),
						document.getElementById('img5')
					  ];
			var h4 = [
						document.getElementById('h1'),
						document.getElementById('h2'),
						document.getElementById('h3'),
						document.getElementById('h4'),
						document.getElementById('h5')
					];
			var p = [
						document.getElementById('p1'),
						document.getElementById('p2'),
						document.getElementById('p3'),
						document.getElementById('p4'),
						document.getElementById('p5')
					];			for(var i=0;i<arr.length;i++){
				for(var key in arr[i]){			
					if(key == 'img'){		
						img[i].src = arr[i][key];				
					}else if(key == 'title'){			
						h4[i].innerHTML = arr[i][key];
					}else if(key == 'desc'){		
						p[i].innerHTML = arr[i][key];
					}
				}							
			}	</script>
</body>
</html>