老师，footer部分有望上窜了，帮我顺便看看作业的完成情况，谢谢老师

来源：2-10 作业题

goufully

2019-04-14 12:52:48

<!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">

<div><img src="./b1.jpg"/></div>
<div class="word"><h3>Library</h3>
Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.
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.<br>
<button>EXPLORE</button>
</div>

<div><img src="./b2.jpg"/></div>
<div class="word"><h3>Computer lab</h3>
Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.
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.<br>
<button>EXPLORE</button>
</div>

<div class="word"><h3>Conference Hall</h3>
Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.
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.<br>
<button>EXPLORE</button>
</div>
<div><img src="./b3.jpg"/></div>

<div class="word"><h3>Play Ground</h3>
Lorem Ipsum is simply dummy text of the<br/>printing and typesetting industry.
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.<br>
<button>EXPLORE</button>
</div>
<div><img src="./b4.jpg"/></div>
</div>


<div class="gallery">
<div class="title">GALLERY</div>
<div class="p1">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</div>
<div class="wrap">

<div class="img1"><img src="./03-01.jpg"/>
<P>SCIENCE LALL</P></div>
<div class="img2"><img src="./03-02.jpg"/>
<P> SCIENCE LALL</P></div>
<div class="img3"><img src="./03-03.jpg"/>
<P>SCIENCE LALL</P></div>

<div class="img4"><img src="./03-04.jpg"/>
<P>SCIENCE LALL</P></div>
<div class="img5"><img src="./03-05.jpg"/>
<P>SCIENCE LALL</P></div>
<div class="img6"><img src="./03-06.jpg"/>
<P>SCIENCE LALL</P></div>

</div>
</div>

<div class="footer">
© 2016 imooc.com 京ICP备 13046642号
</div>
</body>
</html>

CSS部分：

* {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

.header {
width: 100%;
position: fixed;
top: 0;
z-index: 1;

}

.header .top {
width: 100%;
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 ul li:hover {
float: right;
line-height: 100px;
background-color: #000;

}

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

}

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

/*banner部分*/

.banner {
width: 100%;

}

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

}

/*遮罩层*/
.toplayer {
position: absolute;
width: 100%;
height: 500px;
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;
border: none;

}

.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;
padding-bottom: 30px;
color: #BDBDBC;

}

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

.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: 25%;
float: left;
height: 300px;

}

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

}

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

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

}

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

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

}

.gallery img {
width: 300px;
height: 200px;
overflow: hidden;
padding-right: 20px;
pading-right: 20px;
}

.gallery .wrap {
width: 1580px;
}

.gallery .wrap p {
border: 3px black solid;
width: 294px;
height: 30px;
background-color: black;
color: white;
margin-top: -5px;
}

.gallery .img1 {
float: left;
margin-left: 170px;

}

.gallery .img2 {
float: left;
}

.gallery .img3 {
float: left;
margin-right: 170px;
}

.gallery .img4 {
float: left;
margin-left: 170px;
padding-top: 10px;

}

.gallery .img5 {
float: left;
padding-top: 10px;

}

.gallery .img6 {
float: left;
margin-right: 170px;
padding-top: 10px;
}

/*footer*/
.footer {
width: 100%;
height: 100px;
background-color: #07cbc9;
line-height: 100px;
text-align: center;

}