<!-- 网页的导航 -->
    <nav classe="main-nav">
        <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>
    </nav>
</header>

<section classe="banner">
     <!-- banner -->
    <div classe="banner">
        <img src="images/banner3.jpg" alt="banner">
    </div>
     <!-- banner 遮罩层-->
     <div classe="banner-cover">
         banner 遮罩层
     </div>
      <!-- banner 表单 -->
      <div classe="banner-form">
          banner 表单
      </div>
</section>
 
 <!-- about -->
 <section classe="about">
     <h2>About</h2>
     <div>分割线</div>
     <p>
        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.

     </p>
     <div>
         <h3>A WORD<br>ABOUT US</h3>
         <p>
            Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.

         </p>
            <div>EXPLORE</div>
            <img src="images/bb3.jpg" alt="classe">
            <p>70000</p>
     </div>
 
    <div>分割线<br>Students</div>
        <p>600</p>
    
    <div>
        <p>分割线<br>Faculty</p>
    </div>
</section>
 
<!-- 图书馆图文区 -->
<section classe="Library">
    <!-- 图一 -->
    <div>
        <img src="images/b1.jpg" alt="Library">
        <h3>Library</h3>
            <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry<br>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.

            </p>        
        <div>EXPLORE</div>
    </div>

    <!-- 图二 -->
    <div>
        <img src="images/b2.jpg" alt="Library">
        <h3>Library</h3>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry<br>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.

        </p>
        <div>EXPLORE</div>
    </div>
    <div>
        <h3>Library</h3>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry<br>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.

        </p>
        <div>EXPLORE</div>
    </div>

    <!-- 图三 -->
    <div>
        <img src="images/b3.jpg" alt="Library">
        <h3>Library</h3>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry<br>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.

        </p>
        <div>EXPLORE</div>
    </div>

    <!-- 图gallery -->
    <div>
        <img src="images/b4.jpg" alt="GALLERY">
        <p>GALLERY</p>
        <div>分割线</div>
        <p>
            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.
        </p>
    </div>
    <div>
        <img src="images/03-01.jpg" alt="labo">
        <p>Science Lab</p>
    </div>
    <div>
        <img src="images/03-02.jpg" alt="stadium">
        <p>Indoor stadium</p>
    </div>
    <div>
        <img src="images/03-03.jpg" alt="transportation">
        <p>transportation</p>
    </div>
    <div>
        <img src="images/03-04.jpg" alt="kids Room">
        <p>Kids Room</p>
    </div>
    <div>
        <img src="images/03-05.jpg" alt="Meditation classes">
        <p>Meditation classes</p>
    </div>
    <div>
        <img src="images/03-06.jpg" alt="Kids Play Ground">
        <p>Kids Play Ground</p>
    </div>
</section>

<!-- footer -->
<footer>
    <p>&copy; 2016 imooc.com 京ICP备13046642号</p>
</footer>