用网页设计写一个:一个大盒子套两个靠上面的中盒子中间有空隙,分别在中盒子下面放放两个小盒子
时间: 2023-06-23 15:08:23 浏览: 89
tae.rar_设有n个程序
<!DOCTYPE html>
<html>
<head>
<title>Box Design</title>
<style type="text/css">
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 400px;
width: 400px;
background-color: #e4e4e4;
}
.box {
height: 100px;
width: 100px;
background-color: #fff;
border: 1px solid #000;
margin: 10px;
}
.middle-box {
height: 150px;
width: 150px;
background-color: #fff;
border: 1px solid #000;
margin: 10px;
position: relative;
}
.small-box {
height: 50px;
width: 50px;
background-color: #fff;
border: 1px solid #000;
margin: 10px;
position: absolute;
}
.small-box-1 {
top: 0;
left: 0;
}
.small-box-2 {
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="middle-box">
<div class="small-box small-box-1"></div>
<div class="small-box small-box-2"></div>
</div>
<div class="box"></div>
</div>
</body>
</html>
阅读全文