<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0px;padding:0px;}
#box{position:relative;}
#box div{width:20px;height:20px;background:red;position:absolute;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var oDiv=document.getElementById("box");
for(var i=0;i<16;i ){
if(i<8){
oDiv.innerHTML ='<div style="left:' 20*(i 1) "px;top:" 20*(i 1) 'px">' i '</div>';
oDiv.innerHTML ='<div style="left:' 20*(i (16*1 1)) "px;top:" 20*(i 1) 'px">' (i 16) '</div>';
oDiv.innerHTML ='<div style="left:' 20*(i (16*2 1)) "px;top:" 20*(i 1) 'px">' (i 32) '</div>';
}else{
oDiv.innerHTML ='<div style="left:' 20*(i 1) "px;top:" 20*(15-i) 'px">' i '</div>';
oDiv.innerHTML ='<div style="left:' 20*(i (16*1 1)) "px;top:" 20*(15-i) 'px">' (i 16) '</div>';
oDiv.innerHTML ='<div style="left:' 20*(i (16*2 1)) "px;top:" 20*(15-i) 'px">' (i 32) '</div>';
}
}
</script>
</body>
</html>
更多专业前端知识，请上 【猿2048】www.mk2048.com
![没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)