效果图如上 。
知识点:;理解盒模型,margin,border,padding,content
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style1208.css">
</head>
<body>
<div class="wrapper">
<div class="box">
<div class="content">
<div class="content1">
<div class="content2">
<div class="content3">
<div class="content4">
<div class="content5">
<div class="content6">
<div class="content7">
<div class="content8">
<div class="content9"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
margin: 0;
}
.content9{
width: 10px;
height: 10px;
background-color: rgb(53, 160, 56);
}
.content8{
width: 10px;
height: 10px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.content7{
width: 30px;
height: 30px;
padding: 10px;
background-color: rgb(53, 160, 56);
}
.content6{
width: 50px;
height: 50px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.content5{
width: 70px;
height: 70px;
padding: 10px;
background-color: rgb(53, 160, 56);
}
.content4{
width: 90px;
height: 90px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.content3{
width: 110px;
height: 110px;
padding: 10px;
background-color: rgb(53, 160, 56);
}
.content2{
width: 130px;
height: 130px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.content1{
width: 150px;
height: 150px;
padding: 10px;
background-color: rgb(53, 160, 56);
}
.content{
width: 170px;
height: 170px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.box{
width: 190px;
height: 190px;
padding: 10px;
background-color: rgb(53, 160, 56);
}
.wrapper{
width: 210px;
height: 210px;
padding: 10px;
background-color: rgb(255, 255, 255);
}