<div class="nav1"><a href="#"><img src="images/logo.png"></a></div><!--页头logo-->

<div class="nav2"><!--页头导航-->

<ul>

<li><a href="#">home</a></li>

<li><a href="#">about</a></li>

<li><a href="#">gallery</a></li>

<li><a href="#">faculty</a></li>

<li><a href="#">events</a></li>

<li><a href="#">contact</a></li>

</ul>

</div>

</div>

<!--中间部分-->

<div class="banner"><!--中间banner-->

<div class="banner1">

<img src="images/banner3.jpg">

<div class="banner2"></div>

<div class="banner3">

<form class="form1">

<input type="text" name="yonhu" value="your Name" placeholder="your Name" class="input1"><br>

<input type="text" name="dianhus" value="your phone" placeholder="your phone" class="input1"><br>

<input type="text" name="youjian" value=" your Email" placeholder="your Email" class="input1"><br>

<textarea placeholder="Write your comment Here" class="text1"></textarea><br>

<button class="botton1">SEND MESSAGE</button>

</form>

</div>

</div>

 </div><!--中间banner-->

</div>

</body>

</html>

*{

padding: 0;margin: 0;

}

.header{

width: 100%;

height: 100px;

background-color:#07cbc9;

overflow: hidden;

}

.header .nav1{

     float: left;

     width: 300PX;

height: 100PX;

}

.header .nav1 img{

    line-height: 100PX;

    margin-left: 50PX;

    margin-top: 20PX;

}

.header .nav2 {

height: 100px;

float: right;

}

.header .nav2 ul li{

float:left;

}

.header .nav2  ul{ 

margin-right: 50px;

}

.header .nav2  ul li{

list-style: none;

margin-left:10px;

line-height: 100px;

text-align: center;

text-transform: uppercase;

}

.header a{

text-decoration: none;

color: red;

}

.header a:hover{

color: white;

}

.banner{

width: 100%;

height: auto;

overflow: hidden;

}

.banner img{

width: 100%;

height: 500px;

}

.banner .banner2{

width: 100%;

height: 500px;

background-color:black;

position: absolute;

top: 100px;

left: 0;

opacity: 0.5;

}

.banner .banner3{

width: 509px;

height: 288px;

position: absolute;

top:50%;

left: 50%;

margin-top: -144px;

margin-left: -254.5px;

  opacity: 0.4;

}

.banner .banner3 .input1{

width: 505px;

height: 39px;

border: 2px solid white;

margin: 5px;

padding: 4px;

}

.banner .banner3 .text1{

width: 505px;

height: 115px;

border: 2px solid white;

margin: 5px;

padding: 4px;

}

.banner .banner3 .botton1{

width: 123px;

height: 39px;

border: 2px solid white;

margin: 5px;

padding: 4px;

position: absolute;

margin-left: 193px;

}