<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header{
height: 50px;
width: 1200px;
background-color: gold;
}
.left{
height: 800px;
width: 100px;
background-color: greenyellow;
top: 50px;
position: relative;
}
.main{
width: 1200px;
height: 50px;
background-color: darkgray;
top: 850px;
left: 0px;
bottom: auto;
position: absolute;
}
.footer{
height: 800px;
width: 50px;
background-color: blue;
left: 100px;
top: 50px;
position: absolute;
}
.content{
height: 800px;
width: 1050px;
background-color: saddlebrown;
left: 150px;
top: 50px;
position: absolute;
}
/* 在下面书写相关css代码，实现效果图的布局 （方法越多越好) */
</style>
</head>
<body>
<div class="box">
<div class="header"></div>
<div class="main">
<div class="left"></div>
<div class="content"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
202391630307高志远.zip
需积分: 0 201 浏览量
2023-11-20
09:51:13
上传
评论
收藏 197KB ZIP 举报
202391630307高志远.zip （13个子文件） 
期中 期中 01 
1.jpg 79KB
index.html 416B 09 index.html 569B 03 index.html 944B 07 
a.jpeg 79KB index.html 1KB 04 index.html 1KB
效果图.PNG 26KB 08 index.html 614B images 06 index.html 1KB 05 效果图.png 43KB index.html 2KB 02 index.html 539B资源评论
