本文通过一个简单的HTML和CSS实例展示了如何使用内联块级元素创建嵌套的盒子布局效果。每个盒子都有不同的尺寸、边框样式及背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box1{
width:50px;
height:50px;
background:#7FFF59;
display:inline-block;
border:5pxsolid #FFFD4B;
margin:10px;
}
#box2{
width:80px;
height:80px;
background:#FF9EDC;
display:inline-block;
border:1pxdashed white;
margin:5px;
}
#box3{
width:92px;
height:92px;
background:#FF9EDC;
display:inline-block;
border:1pxdashed white;
margin:10px;
}
#box4{
width:114px;
height:114px;
background:#FF9EDC;
display:inline-block;
border:5pxsolid #FF9EDC;
margin:10px;
}
#box5{
width:144px;
height:144px;
background:#F6F6F6;
display:inline-block;
border:5pxsolid #D2F0FD;
margin:10px;
}
#box6{
width:174px;
height:174px;
background:white;
display:inline-block;
border:1pxdashed black;
margin:10px;
}
</style>
</head>
<body>
<div id="box6">
<divid="box5">
<divid="box4">
<divid="box3">
<divid="box2">
<divid="box1"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
4787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
