![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：代码看上去很累, 你不觉得吗? 下次放在代码块中
Collection
Collection
html代码：
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset ="UTF-8">
<link rel="stylesheet" href ="0705.css" style="text/css">
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
</div>
</body>
</html>
css代码：
body{
margin:0;
}
.box1{
width:150px;
height:150px;
position:absolute;
left:130px;
top:10px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid red;
}
.box2{
width:150px;
height:150px;
background-color:red;
position:absolute;
left:300px;
top:10px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid blue;
}
.box3{
width:150px;
height:150px;
background-color:Magenta;
position:absolute;
left:440px;
top:130px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid Orange;
}
.box4{
width:150px;
height:150px;
background-color:DeepSkyBlue;
position:absolute;
top:300px;
left:440px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid Lime;
}
.box5{
width:150px;
height:150px;
background-color:LightGreen;
position:absolute;
top:130px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid blue;
}
.box6{
width:150px;
height:150px;
background-color:Orange;
position:absolute;
top:300px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid Yellow;
}
.box7{
width:150px;
height:150px;
background-color:Chocolate;
position:absolute;
top:440px;
left:130px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid Purple;
}
.box8{
width:150px;
height:150px;
background-color:FireBrick;
position:absolute;
top:440px;
left:300px;
border-radius:50%;
background-image:url(girl.jpg);
border:3px solid LightSteelBlue;
}
.box{
width:600px;
height:600px;
border:2px solid GoldEnrod;
position:relative;
}
div h1{
margin:0;
}
html实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<link rel="stylesheet" style="text/css" href="07052.css">
</head>
<body>
<div>
<div><img src="login.jpg" ></div>
</div>
</body>
</html>
css实例代码：
body{
background-image:url(php.jpg);
background-size:cover;
}
.login img{
/*登录窗口大小*/
width:380px;
height:460px;
}
.nav{
/*设置遮罩*/
position:absolute;
left:0;
right:0;
width:100%;
height:100%;
background-color:black;
opacity:0.7;
}
.login{
/*绝对定位登录窗口*/
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:-230px;
}
html实例：
<!DOCTYPE html>
<html>
<head>
<meta charset ="UTF-8">
<link rel="stylesheet" href="07053.css" style="text/css">
</head>
<body>
<h1>实现广告位</h1>
<div>
<button>X</button>
<h2>郑州房产火热销售中</h2>
<h1>请电话联系我们</h1>
</div>
</body>
</html>
css实例：
div{
width:260px;
height:300px;
background-color:DeepSkyBlue;
position:fixed;
right:0;
bottom:0;
}
.nav button{
position:absolute;
right:0;
}