老师，帮我看看，后面该怎么写？顺便看看前面实现的一些问题，谢谢

来源：2-10 作业题

goufully

2019-04-11 22:25:59

<!DOCTYPE html>
<html lang="en">
<head>


<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./test_18.css">

</head>
<body>

<div class="header">
<div class="top">
<div class="logo"><img src="logo.png"/></div>
<div class="nav">
<ul>
<li><a>HOME</a></li>
<li><a>ABOUT</a></li>
<li><a>GALLERY</a></li>
<li><a>FACULTY</a></li>
<li><a>EVENTS</a></li>
<li><a>CONTACT</a></li>
</ul>
</div>
</div>
</div>

<div class="banner"><img src="./banner3.jpg"/>
<div class="toplayer">
<form>
<input type="text" placeholder="your Name"><br>
<input type="text" placeholder="your Content"><br>
<input type="text" placeholder="your Mail"><br>
<input type="text" placeholder="What your content here" class="input4"><br>
<input type="submit" placeholder="SFND MFSSAGF" value="SFND MFSSAGE" class="btn"><br>
</form>
</div>
</div>

<div class="about">
<div class="top">
<div class="title">ABOUT</div>
<div class="p1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting </p>
<p>industry.Lorem Ipsum has been the industry's standard dummy text</p>
<p>even since the 1500s.</p></div>
</div>
<div class="middle">

<div class="m-l">
<div class="title1">A WORD ABOUT US</div>
<div class="main">
<p> Prasent dignissim viverra est,sed<br/> bibendum ligula congue non.Sed ac nisl</p>
<p>et felis gravida commodo?Suspendisse</p>
<p>eget ullamcorper ipsum.Suspendisse</p>
<p>diam amet.</p>
<form><input type="submit" value="EXPLORE"></form>
</div>
<div class="m-m"><img src="./bb3.jpg"/></div>
</div>
<div class="m-r">
<p>70000</p>
<p>students</p>
<p>600</p>
<p>Faculty</p>
</div>
</div>

<div class="bt">

<dl><img src="./b1.jpg" />
<div class="word"><h3>Library</h3>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd> Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a gallery of type and scrambled it to make a type<br>
specimen book.</dd>
<button>EXPLORE</button></div>
</dl>
<dl><img src="./b2.jpg" />
<div class="word"><h3>Computer lab</h3>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd> Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a gallery of type and scrambled it to make a type<br>
specimen book.</dd>
<button>EXPLORE</button></div>
</dl>

<dl>
<div class="word"><h3>Conference Hall</h3>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd> Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a gallery of type and scrambled it to make a type<br>
specimen book.</dd>
<button>EXPLORE</button></div>
<img src="./b3.jpg" />
</dl>
<dl>
<div class="word"><h3>Play Ground</h3>
<dt>Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.</dt>
<dd> Lorem Ipsum has been the industry's standard dummy<br>
text ever since the 1500s,when an unknown printer took<br>
a gallery of type and scrambled it to make a type<br>
specimen book.</dd>
<button>EXPLORE</button></div>
<img src="./b4.jpg" />
</dl>

</div>
</div>
/*GALLERY部分*/
<div class="gallery">
<div class="title">GALLERY </div>

</div>
</body>
</html>

CSS:

* {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

.header {
width: 100%;

}

.header .top {
width: 1580px;
height: 100px;
background-color: #07cbc9;
overflow: hidden;

}

.header .top .logo {
float: left;
font-size: 36px;
/*color: #fff;*/
padding-left: 15px;
line-height: 100px;

}

.header .top .logo img:hover {
color: red;
}

.header .top ul li {
float: right;
line-height: 100px;

}

.header .top ul li a {
padding: 0 15px;
color: #fff;
}

.header .top ul li a:hover {
color: orange;
}

/*banner部分*/

.banner {
width: 100%;

}

.banner img {
height: 600px;
width: 100%;
padding: 0;

}

/*遮罩层*/
.toplayer {
position: absolute;
width: 100%;
height: 600px;
left: 0;
/*bottom:0;*/
top: 100px;
background-color: #000;
opacity: 0.5;

}

/*form部分*/
.banner form {
height: 100px;
text-align: center;
padding-top: 60px;
opacity: 0.5;
}

.banner form input {
width: 400px;
height: 50px;
margin-top: 15px;

}

.banner form .input4 {
width: 400px;
height: 150px;
padding-top: 0;
}

.banner form .btn {
width: 100px;
border: none;
height: 50px;

}

.banner form input:hover {
color: #07cbc9;
}

.banner form .btn {
border: none;
background-color: #07cbc9;
}

/*ABOUT部分*/
.about {
width: 100%;
height: 500px;
position: relative;
}

.about .title {
text-align: center;
padding-top: 20px;
font-size: 36px;
font-weight: bold;
}

.about .p1 {
text-align: center;
padding-top: 10px;
color: #BDBDBC;

}

.about .middle img {
width: 500px;
height: 300px;
position: absolute;
top: 50%;
right: 50%;
margin-right: -250px;
margin-top: -150px;

}

.about .title1 {
font-size: 36px;
}

.about .middle .main input {
border: none;
background-color: #000;
color: #fff;

}

.about .middle .main input:hover {
opacity: 0.1;
border: black;
}

.about .middle {
width: 100%;
overflow: hidden;
}

.about .middle .m-l {
float: left;
margin-left: 30px;
}

.about .middle .m-m {
float: left;
}

.about .middle .m-r {
float: right;
height: 300px;
margin-right: 300px;

}

.about .bt {
width: 100%;
height: 600px;
overflow: hidden;

}

.about .bt button {
background-color: black;
color: #fff;
}

.about .bt img {
width: 360px;
height: 300px;
float: left;

}

.about .bt .word {
background-color: #07cbc9;
width: 360px;
height: 300px;
float: left;
}

.about .bt button:hover {
opacity: 0.1;
border: black;
}

/*gallery*/
.gallery {
width: 100%;
}