运用css相关知识编写了一个简单的盒子模型
运行效果：
代码详情：
1.HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型练习</title> <link rel="stylesheet" href="css/01.css"> </head> <body> <div class="div4"> <div class="div3"> <div class="div2"> <div class="div1"> </div> </div> </div></div> </body> </html>
2.css代码：
.div1{ width: 100px; height: 100px; background-color: #E8ED79; } .div2{ width: 140px; height: 140px; background-color:#A5934B ; padding-top: 40px; padding-left: 40px; } .div3{ width:260px; height: 260px; background-color:#1FA282 ; padding-left: 80px; padding-top: 80px; } .div4{ width: 390px; height: 390px; background-color:#1C54B1 ; padding-top:50px; padding-left: 50px; }
