Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
效果图
代码如下:
1.主要用到三个属性 position: absolute;position: relative;position: fixed;
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
font-size: 10px;
}
header,
footer {
height: 5rem;
background: #522332;
}
.container {
min-height: 40rem;
position: relative;
margin: 0.5rem 0;
}
.container aside {
width: 15rem;
background: #5646;
min-height: inherit;
position: absolute;
}
.container aside:first-of-type {
left: 0;
top: 0;
}
.container aside:last-of-type {
right: 0;
top: 0;
}
body {
position: relative;
}
.container main {
min-height: inherit;
background: burlywood;
position: absolute;
left: 15.5rem;
right: 15.5rem;
}
.container main img {
position: fixed;
left: 20rem;
top: 10rem;
}
</style>
</head>
<body>
<header>页眉</header>
<div class="container">
<aside>左侧</aside>
<main>
<img src="111.png" alt="" />
</main>
<aside>右侧</aside>
</div>
<footer>底部</footer>
</body>
</html>