图片上移，

#about部分
   .about{width:100%;
           margin:0 auto;}
     .about .about-top h1{text-align:center;
                      margin-top:50px;}
 .about .string{width:30px;
         height:2px;
               background:#07cbc9;
               margin:0 auto;
      margin-top:10px;}
         .about .about-top .word1{width:420px;
                      font-size:13px;
       font-family:"黑体";
       margin:0 auto;
       margin-top:10px;
       color:#7D7C7F;
       font-style:bold;
       }
      .about .about-middle{width:900px;
                        height:400px;
         margin:0 auto;
       
         margin-top:10px;
         position:relative;
         }
  
   .about .about-middle .middle1{float:left;
                                 position:absolute;
                                font-size:30px;
                                  width:150px;
          height:100px;
                                  font-family:"黑体";
          font-style:bolder;
          margin-left:100px;
          margin-top:30px;
         
         }
    .about .about-middle .middle2 img{float:left;
                                   position:absolute;
                                    width:400px;
            height:300px;
           margin-left:250px;
           margin-top:30px;
               }
     
     .about .about-middle .middle3{width:200px;
                                height:300px;
           background-color:transparent;
           float:right;
           margin-right:20px;
           margin-top:30px;}
    .about .about-middle .middle3 .n-top,.n-bottom{width:200px;
                                         height:100px;
           border:1px solid #07cbc9;}
       .about .about-middle .middle3 .n-bottom{margin-top:20px;}
      .about .about-middle .middle3  h1,p{text-align:center;
                                             margin-top:10px;}
    .clear{clear:both;}
    .about .about-middle .about-left{
                                     width:300px;
                                     height:160px;
          border:1px solid grey;
          margin-left:100px;
          float:left;
          margin-top:130px;
          opacity: 0.5;
                                        z-index:2 ;
           background-color:rgba(255,255,255,.4);
          
                                        }
      .about .about-middle .about-left .word2{margin-left:20px;
                                           z-index: 3;
            font-style:bolder;
           }
   .about .about-middle .about-left button{margin-left:20px;
                                           padding:5px;
             background:black;
             color:white;
             margin-top:15px;}
       .about .about-middle .about-left button:hover{background:transparent;
                                                  color:black;}
  .about .about-bottom{width:100%;
                       height:600px;
        background:yellow;

    margin-top:50px;

     
       } 

 <!--ABOUT区-->
     <div class="about">
  <!--about上面部分-->
  <div class="about-top">
     <h1>ABOUT</h1>
  <div class="string"></div>
  <div class="word1">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
  </div>
  </div>
  <!--about中间部分-->
  <div class="about-middle">
  <div class="middle1">
  A WORD <br />ABOUT  US
  </div>
   <div class="middle2">
   <img src="images/bb3.jpg"/>
  </div>
   <div class="middle3">
   <div class="n-top">
   <h1>70000</h1>
   <div class="string"></div>
   <p>Students</p>
   </div>
   <div class="n-bottom">
   <h1>600</h1>
   <div class="string"></div>
   <p>Faculty</p>
   </div>
   </div>
   <div class="about-left">
   <div class="word2">
   Praesent dignissim viverra est, sed<br/>bibendum ligula congue non. Sed ac nisl<br/>et felis gravida commodo? Suspendisse<br/>eget ullamcorper ipsum. Suspendisse<br/>diam amet.
   </div>
   <button>EXPLORE</button>
   <div class="clear"></div>
   </div>
   <!--about下面部分-->
   <div class="about-bottom">
   <img src="images/b1.jpg">
   <div class="about-bottom1">
   <h1>Library</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <h3>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>
   <button>EXPLORE</button>
   </div>
   <img src="images/b2.jpg">
   <div  class="about-bottom2">
   <h1>Computer Lab</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <h3>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>
   <button>EXPLORE</button>
   </div>
   <img src="images/b3.jpg">
   <div  class="about-bottom3">
   <h1>Conference Hall</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <h3>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>
   <button>EXPLORE</button>
   </div>
   <img src="images/b4.jpg">
   <div class="about-bottom4">
   <h1>Play Ground</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <h3>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</h3>
   <button>EXPLORE</button>
   </div>
   </div>

下面图片上移，给about-bottom设置宽高，跑到上面内容里去了