<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>自動(dòng)生成10個(gè)li</title>
????<style>
?*{
????????????margin:0;
????????????padding:0;}
????ul,li{
????????list-style-type:none;}
????ul{
????????position:?relative;}
????????li{
????????????background:red;
????????????width:50px;
????????????height:?50px;
????????????font-size:30px;
????????????text-align:?center;
????????????line-height:50px;
????????????color:?white;
????????????margin:10px;
????????????position:?absolute;
????????}
????</style>
????<script>
?window.onload?=?function?()?{
????????????var?oBtn?=?document.getElementById('btn1');
????????????var?oUl?=?document.getElementById('ul1');
????????????var?aLi?=?document.getElementsByTagName('div');
????????????oBtn.onclick?=?function?()?{
????????????????for(var?i=0;i<10;i++){
????????????????????oUl.innerHTML?+=?"<li>"+i+"</li>";
????????????????}
????????????????for(var?i=0;i<aLi.length;i++){
????????????????????aLi[i].style.left?=?10+i*60+"px";
????????????????????aLi[i].style.top=?10+i*60+"px";
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<input?id="btn1"?type="button"?value="自動(dòng)生成10個(gè)LI">
????<ul?id="ul1"></ul>
</body>
</html>
請(qǐng)問我這個(gè)為什么會(huì)重疊在一起呢？我不是給每一個(gè)i都設(shè)置不同的top和left值了嗎？
慕九州7009252
2016-12-01 15:18:09
