简单页面纯css
<!DOCTYPE html>
<html lang="zh-CH">
<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>作业</title>
<style>
a {
width: 90px;
height: 20px;
background-color: antiquewhite;
display: inline-block;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li{
float: left;
}
li a{
display: block;
padding: 33% 33%;
margin: 10px 0px 0px 10px;
}
#bod {
width: 100%;
height: 100%;
background-color: rgb(128, 207, 207);
position: absolute;
right: 0px;
}
#title {
width: auto;
height: 100px;
position: absolute;
top: 20px;
left: 10px;
right: 10px;
background-color: #cae8ca;
}
#d1{
position: absolute;
top:130px;
left: 10px;
width: 30%;
height: 200px;
background-color: antiquewhite;
}
#d2{
position: absolute;
top:340px;
left: 10px;
width: 30%;
height: 200px;
background-color: antiquewhite;
}
#d3{
position: absolute;
top:550px;
left: 10px;
width: 30%;
height: 200px;
background-color: antiquewhite;
}
#r1{
position: absolute;
top:130px;
right: 10px;
width: 65%;
height: 620px;
background-color: antiquewhite;
}
#r2{
position: absolute;
bottom:10px;
left: 10px;
right: 10px;
width: auto;
height: 100px;
background-color: antiquewhite;
}
#up {
position: fixed;
left: 90%;
top: 90%;
width: 80px;
height: 400px;
font-size: 30px;
color: #ec1313;
background-color: #cae8ca;
}
</style>
</head>
<body>
<div id="bod">
<div id="title">
<ul>
<li><a href="#">吃饭</a></li>
<li><a href="#">喝水</a></li>
<li><a href="#">游戏</a></li>
</ul>
</div>
<div id="d1">1</div>
<div id="d2">2</div>
<div id="d3">3</div>
<div id="r1"></div>
<div id="r2">22</div>
</div>
<a href="#bod" id="up">回到顶层</a>
</body>
</html>
页面效果