请用html与css编写一个程序,展示效果如上图。要求无论怎么滚动该图像固定不动。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="box">
<div class="d1"> </div>
<div class="d2"> </div>
<div class="d3"> </div>
<div class="d4"> </div>
<div class="d5"> </div>
</div>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
div.box{
position:fixed;
left:50%;
top:50%;
margin-left:-185px;
margin-top:-90px;
width:370px;
height:180px;
background-color:white;
}
div.d1{
position:absolute;
left:0px;
top:0px;
width:100px;
height:100px;
border:10px solid blue;
border-radius:50%;
}
div.d2{
position:absolute;
left:65px;
top:60px;
z-index:1;
width:100px;
height:100px;
border:10px solid yellow;
border-radius:50%;
}
div.d3{
position:absolute;
left:125px;
top:0px;
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
div.d4{
position:absolute;
left:190px;
top:60px;
z-index:1;
width:100px;
height:100px;
border:10px solid green;
border-radius:50%;
}
div.d5{
position:absolute;
left:250px;
top:0px;
width:100px;
height:100px;
border:10px solid red;
border-radius:50%;
}
或者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Untitled2.css">
<title>Document</title>
</head>
<body>
<div class="plat">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
<div class="circle5"> </div>
</div>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div>欢迎报考湖南师范大学</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
*{
margin:0;
padding:0;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
position:absolute;
width:100px;
height:100px;
border:10px solid black;
border-radius:50%;
}
.plat{
position:fixed;
left:50%;
top:50%;
margin-left:-185px;
margin-top:-90px;
width:370px;
height:180px;
}
.circle1{
left:0px;
top:0px;
border-color: blue;
}
.circle2{
left:65px;
top:60px;
z-index:1;
border-color:yellow;
}
.circle3{
left:125px;
top:0px;
border-color: black;
}
.circle4{
left:190px;
top:60px;
z-index:1;
border-color: green;
}
.circle5{
left:250px;
top:0px;
border-color:red;
}