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

最新推荐文章于 2024-10-17 18:32:20 发布

原创最新推荐文章于 2024-10-17 18:32:20 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS基础 #妙味课堂

妙味课堂Js基础课后练习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用纯CSS定位的方式来自动生成一个包含10个不同颜色方块的动态布局。通过JavaScript控制每个元素的位置，展示了如何利用CSS相对定位属性实现元素的精确布局。这种方法不仅适用于快速原型制作，也适合于需要动态调整页面布局的应用场景。

<!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>