第2课--2.1自动生成10个LI-只能用定位实现（基础版）

来源：互联网发布：国外大叔导航软件编辑：程序博客网时间：2024/05/16 15:18

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>自动生成10个Li-只能用定位实现</title><style>.div0,.div4,.div8{width:50px;height:50px;background:red;font:20px/30px "宋体";text-align:center;position:relative;border:1px solid black;}.div1,.div5,.div9{width:50px;height:50px;background:yellow;font:20px/30px "宋体";text-align:center;position:relative;border:1px solid black;}.div2,.div6{width:50px;height:50px;background:blue;font:20px/30px "宋体";text-align:center;position:relative;border:1px solid black;}.div3,.div7{width:50px;height:50px;background:green;font:20px/30px "宋体";text-align:center;position:relative;border:1px solid black;}#button{}</style><script>window.onload = function(){var oBtn = document.getElementById("button");var number = 0;var number2 = 20;oBtn.onclick = function(){for(var i = 0;i < 10;i++){document.body.innerHTML += '<div class ="div'+ i +'" style = "left:' + number + 'px;top:'+ number2+'px;" class = "div1">'+ i +'</div>';number += 60;number2-= 52;} }}</script></head><body><input type = "button" value = "自动生成10个Li" id = "button"/><br/></html>

阅读全文

0 0