4-6 麻烦检查结构是否正确

<!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>4-6自由编程网页练习xt</title>
<style>
* {
margin: 0;
padding: 0;
}

header {
width: 100%;
height: 80px;
background-color: #07cbc9;
overflow: hidden;
}

header .box {
width: 1200px;
height: 80px;
margin: 0 auto;

}

header .box .logo {
float: left;
padding-top: 16px;
padding-bottom: 16px;
}

header .box .nav {
float: right;
}

header .box .nav li {
font-size: 16px;
float: left;
list-style: none;
padding-left: 20px;
color: white;
text-align: center;
line-height: 80px;
}

section {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;

}

section .banner {
width: 100%;
height: 600px;
overflow: hidden;

}

section .banner img {
width: 100%;
height: 600px;
position: absolute;
right: 0;
bottom: 0;
}

section .banner .hide {
width: 100%;
height: 600px;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
right: 0;
bottom: 0;
}

section .banner .banner-form {
width: 600px;
height: 400px;
position: absolute;
background-color: none;
right: 50%;
top: 50%;
margin-right: -300px;
margin-top: -200px;
}

section .banner .banner-form p input {
display: block;
width: 502px;
height: 38px;
margin-bottom: 20px;
background: none;
border: 1px solid #808080;
color: #808080;
position: relative;
left: 50%;
margin-left: -251px;
}

section .banner .banner-form textarea {

width: 502px;
height: 108px;
margin-bottom: 20px;
background: none;
border: 1px solid #808080;
color: #808080;
position: relative;
left: 50%;
margin-left: -251px;
}

section .banner .banner-form button {
display: block;
width: 198px;
height: 38px;
background: none;
border: 1px solid #808080;
color: #808080;
margin: 0 auto;
}
</style>
</head>

<body>
<header>
<div class="box">
<h1 class="logo"><img src="images/logo.png" alt=""></h1>
<ul class="nav">
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</header>
<section>
<div class="banner">
<img src="images/banner3.jpg" alt="">
<div class="hide"></div>
<div class="banner-form">
<p><input type="text" placeholder="your Name"></p>
<p><input type="text" placeholder="your Phone"></p>
<p><input type="email" placeholder="your Email"></p>
<textarea cols="30" rows="10" placeholder="Write Your Comment Here"></textarea>
<button>SEND MESSAGE</button>
</div>
</section>
</body>

</html>

与民桐乐 2022-05-19

源自：浮动与定位 4-6 自由编程