作业问题。。

来源：2-10 作业题

慕九州3859248

2019-09-18 00:07:24

img{vertical-align:top;}设置了之后为什么图片与内容之间没有空隙了呢，老师麻烦检查一下，把错误和方法给我发一下图片就是作业素材里的

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="index.css"/>
   </head>
   <body>
       
       <header>
           
           <div class="logo">
               <a href="#"><img src="img/logo.png"/></a>
           </div>
           
           <nav>
               <a href="#">HOME</a>
               <a href="#">ABOUT</a>
               <a href="#">GALLERY</a>
               <a href="#">FACULTY</a>
               <a href="#">EVENTS</a>
               <a href="#">CONTACT</a>
           </nav>
           <div class="clear"></div>
       </header>

       
       <section class="banner">
           
           <div class="pic">
               <img src="img/banner3.jpg"/>
           </div>
           
           <div class="topLayer"></div>

           
           <div class="form">
               <form action="#" method="post">
                   <input type="text" placeholder="your name"/><br />
                   <input type="tel" placeholder="your Phone"/><br />
                   <input type="email" placeholder="your email"/><br />
                   <textarea placeholder="Write You Comment here"></textarea><br />
                   <input class="tijiao" type="submit" value="SEND MESSAGE"/>
               </form>
           </div>
       </section>

       
       <section class="about">
           <div class="top">
                   <h1>ABOUT</h1>
               <div class="tit">
                   May you have enough happiness to make you sweet,<br />
                   enough trials to make you strong,enough sorrow <br />
                   to keep you human,enough hope to make you happy?<br />
                   Always put yourself in others’shoes.If you <br />
                      that it hurts you,it probably hurts the other <br />
                      person, too.
               </div>
           </div>
           <div class="middle">
               <div class="left">
                   <h3>A WORD <br /> ABOUT US</h3>
                   <div class="tit2">
                       May you have enough happiness to make you <br />
                       sweet,enough trials to make you strong,enough <br />
                       sorrow to keep you human <br /><br />
                       <button>EXPLORE</button>
                   </div>

               </div>
               <div class="zhong">
                   <img src="img/bb3.jpg"/>
               </div>
               <div class="right">
                   <div>
                       <p>70000</p>
                       <p>Student</p>
                   </div>
                   <div>
                       <p>600</p>
                       <p>Facuity</p>
                   </div>
               </div>
               <div class="clear"></div>
           </div>
           <div class="foot">
               <dl>
                   <dt><img src="img/b1.jpg"/></dt>
                   <dd><h3>Conference Hall</h3><br />
                       May you have enough happiness to make you sweet,<br />
                       enough trials to make you strong,enough sorrow <br />
                       to keep you human,enough hope to make you happy?<br />
                       Always put yourself in others’shoes.If you <br />
                       <button>EXPLORE</button>
                   </dd>

               </dl>
               <dl>
                   <dd><h3>Conference Hall</h3><br />
                       May you have enough happiness to make you sweet,<br />
                       enough trials to make you strong,enough sorrow <br />
                       to keep you human,enough hope to make you happy?<br />
                       Always put yourself in others’shoes.If you <br />
                       <button>EXPLORE</button>
                   </dd>

                   <dt><img src="img/b2.jpg"/></dt>
               </dl>
               <dl>
                   <dt><img src="img/b3.jpg"/></dt>
                   <dd><h3>Conference Hall</h3><br />
                       May you have enough happiness to make you sweet,<br />
                       enough trials to make you strong,enough sorrow <br />
                       to keep you human,enough hope to make you happy?<br />
                       Always put yourself in others’shoes.If you <br />
                       <button>EXPLORE</button>
                   </dd>

               </dl>
               <dl>
                   <dd><h3>Conference Hall</h3><br />
                       May you have enough happiness to make you sweet,<br />
                       enough trials to make you strong,enough sorrow <br />
                       to keep you human,enough hope to make you happy?<br />
                       Always put yourself in others’shoes.If you <br />
                       <button>EXPLORE</button>
                   </dd>

                   <dt><img src="img/b4.jpg"/></dt>
               </dl>
           </div>
       </section>

       
       <section class="gallery">
           <div class="title">
               GALLERY
           </div>
           <div class="tit3">
               May you have enough happiness to make you sweet,<br />
               enough trials to make you strong,enough sorrow <br />
               to keep you human,enough hope to make you happy?<br />
               Always put yourself in others’shoes.If you <br />

           </div>
           <div class="pic">
               <div class="one">
                   <img src="img/03-01.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="two">
                   <img src="img/03-02.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="three">
                   <img src="img/03-03.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="four">
                   <img src="img/03-04.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="five">
                   <img src="img/03-05.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="six">
                   <img src="img/03-06.jpg"/>
                   <div>
                       SCIIENCE LAB
                   </div>
               </div>
               <div class="clear"></div>
           </div>
           <div class="clear"></div>
       </section>

       
       <footer>
           Copyright © 2016 imooc.com All Rights Reserved.
       </footer>
   </body>
</html>

*{margin: 0;padding: 0;font-family: "微软雅黑";}
a{text-decoration: none;}
.clear{clear: both;}
header{
   width: 100%;
   height: 80px;
   margin: 0 auto;
   position: fixed;
   z-index: 10;
   top: 0px;
   background-color:#07cbc9;
}
header .logo{float: left; margin-left: 100px;}
header .logo img{width: 200px; height: 80px;line-height: 80px;text-align: center;}
header nav{float: right;margin-right: 100px;}
header nav a{font-size: 15px;
           font-weight: bold;
           color: white;
           display: block;
           float: left;
           height: 80px;
           line-height: 80px;
           text-align: center;
           padding-left: 15px;
           }
nav>a:hover{color: red;}
.banner{position: relative;}
.banner .pic{width: 100%; height: 600px;margin-top: 80px;}
.banner .pic img{width: 100%;height: 600px;z-index: 1;}
.banner .topLayer{position: absolute;
                  top:0px;
                  background: #000000;
                  width: 100%;
                  height: 600px;
                  opacity: 0.5;
                  z-index: 2;
                   }
.banner .form{width: 509px;
           height:400px;
           position: absolute;
           top:100px;
           margin-left: 50%;
           left: -254.5px;
           z-index: 5;
           }
.banner .form form input{width: 505px;
                       height: 39px;
                       display: block;
                       border: 2px;
                       background-color: rgba(0,0,0,0.5);}
.banner .form form textarea{display: block;
                           height:117px ;
                           width: 507px;
                           border: 2px;
                           background-color: rgba(0,0,0,0.5);}
.banner .form form>.tijiao{
   display: block;
   width: 123px;
   height: 39px;
   border: 2px;
   margin: 0 auto;
}
/*边框不能变红*/
.banner .form form input:hover{border-color: #07CBC9;}
.banner .form form textarea:hover{border-color: #07CBC9;}
.banner .form form input .tijiao:hover{border: none;background-color:#07CBC9 ;}

.about>.top,.about>.middle{width: 1080px;margin: 0 auto;}
.about>.top>.t{text-align: center;width: 100%;}
.about>.top>h1{font-size: 20px;
               text-align: center;
               font-weight: bold;
               padding-top: 30px;}
.about>.top>.tit{text-align: center;
               margin: 30px;
               font-size: 8px;}
.middle .left,.middle .zhong{float: left;}
.middle .right{float: right;}
.middle .left{height: 400px;
              width: 200px;
              position: relative;}
.middle .left .tit2{width: 370px;
                   height: 102px;
                   position: absolute;
                   font-size: 10px;
                   left: 5px;
                   z-index: 5;
                   padding-top:30px;}
.middle .left .tit2 button{color: white;
                       background-color: #000000;}
.middle .left .tit2 button:hover{background-color:rgba(0,0,0,0.1);
                               border: 2px solid #000000;}
.middle .zhong img{width: 568px;height: 380px;}
.middle .right div{width: 238px;height: 144px;
                   border: 1px solid deepskyblue;
                   margin-bottom: 20px;}
.middle .right div p{text-align: center;padding: 20px;}
.middle .right div p:nth-child(1){font-size: 30px;font-weight: bold;}
.about .foot{width: 100%;height: 700px;padding-top: 30px;}
.about .foot dl{width:25%;height: 300px; float: left;}
.about .foot dl img{width:100%;height: 300px;}
.about .foot dl dd{width:100%;height: 300px;color: white;background: deepskyblue;font-size: 10px;line-height: 20px;}
.about .foot dl dd h3{font-size: 25px;padding: 30px 0;}
.about .foot dl dd button{text-align: center;width: 100px; height: 30px;margin-top: 50px;position: absolute;margin-left:100px;background-color: #000000;color: white;}
.about .foot dl dd button:hover{border: 1px solid black; background-color: transparent;}
img {
   vertical-align:top;
}
.gallery{width: 1200px; margin: 0 auto;}
.gallery .title{text-align: center;font-weight: bold;font-size: 24px}
.gallery .tit3{text-align: center;margin: 30px 0;font-size: 10px;color:darkgray}
.gallery>.pic>div{float: left; width: 360px;margin: 10px;text-align: center;}
.gallery>.pic>div>img{height: 240px;}
.gallery>.pic>div>div{height: 64px;background: #000000; color: white;}

footer{background-color: #07CBC9;color:white;font-size: 15px;text-align: center;height: 80px;line-height: 80px;}