<!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>
#first{
width :76em;
height: 34em;
border: 10px rgb(249, 4, 4) solid;
border-style: solid;
background-image: url("img/背景1.webp");
}
#second{
position: absolute;
top:120px;
left: 40px;
width: 30%;
height: 100px;
background-color: antiquewhite;}
#thrid{
position: absolute;
top:260px;
left: 40px;
width: 30%;
height: 100px;
background-color: antiquewhite; }
#fourth{
position: absolute;
top:400px;
left: 40px;
width: 30%;
height: 100px;
background-color: antiquewhite; }
#fifth{
position: absolute;
top:570px;
left: 40px;
width: 90%;
height: 70px;
background-color: antiquewhite; }
#sixth{
position: absolute;
top:120px;
left: 520px;
width: 60%;
height: 400px;
background-color: antiquewhite; }
#seventh{
position: absolute;
top:30px;
left:40px;
width: 90%;
height: 70px;
background-color: rgb(236, 239, 244); }
#eighth{
position: absolute;
top:620px;
left:1450px;
width: 5%;
height: 70px;
background-color: rgb(8, 16, 244);
position: fixed; }
</style>
</head>
<body>
<div id="first"></div>
<div id="second">路飞</div>
<div id="thrid">索隆</div>
<div id="fourth">山治</div>
<div id="fifth"></div>
<div id="sixth"></div>
<div id="seventh"> <a href="#">武装色霸气</a> <a href="#">见闻色霸气</a> <a href="#">霸王色霸气</a></div>
<div id="eighth"><a href="#bod" id="up">回到顶层</a></div>
</body>
</html>
