<!-- 网页的头部包含logo和导航条 -->
    <header>
        <!-- 网页的logo -->
        <div class="logo">
            <h1>Gareer Builder</h1>
        </div>
        <!-- 网页的导航条 -->
        <nav>
            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>GALLERY</li>
                <li>FACULTY</li>
                <li>EVENTS</li>
                <li>CONTACT</li>
            </ul>
        </nav>
    </header>
    <!-- banner区域 -->
    <section class="banner">
        <aside class="images">
            <img src="images/banner3.jpg" alt="">
        </aside>
        <!-- 遮罩层 -->
        <div class="hidden"></div>
        <!-- 表单区域 -->
        <form action="">
            <input type="text" placeholder="your Name">
            <input type="text" placeholder="your Phone">
            <input type="email" placeholder="your Email">
            <textarea name="" id="" cols="50" rows="5" placeholder="Write your Comment Here"></textarea>
            <p>
                <input type="submit" value="SEND MESSAGE">
            </p>
        </form>
    </section>
    <!-- 内容区域 -->
    <section class="content">
        <!-- about区域 分为上下部分-->
        <div class="about">
            <!-- about上半部分 -->
            <div class="about-top">
                <h2>About</h2>
                <div class="line">分割线</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>
            <!-- about下半部分 -->
            <div class="about-bottom">
                <!-- 左边部分 -->
                <div class="left">
                    <h2>A WORD ABOUT US</h2>
                    <!-- 左边内容区域 -->
                    <div class="word1">
                        <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>
                        <button>EXPLORE</button>
                    </div>
                </div>
                <!-- 图片区域 -->
                <div class="images">
                    <img src="images/bb3.jpg" alt="">
                </div>
                <!-- 右边区域 学生和天赋-->
                <div class="students-and-faculty">
                    <!-- 学生区域 -->
                    <div class="students">
                        <h3>70000</h3>
                        <div class="line">分割线</div>
                        <h4>students</h4>
                    </div>
                    <!-- 天赋区域 -->
                    <div class="faculty">
                        <h3>600</h3>
                        <div class="line">分割线</div>
                        <h4>faculty</h4>
                    </div>
                </div>
            </div>
        </div>          
        <!-- 图文混排区域 分为8个盒子-->
        <div class="img-words">
            <div class="box1">
                <a href=""><img src="images/b1.jpg" alt=""></a>
            </div>
            <div class="box2">
                <h3>Library</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p>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>
                <button>EXPLORE</button>
            </div>
            <div class="box3">
                <a href=""><img src="images/b2.jpg" alt=""></a>
            </div>
            <div class="box4">
                <h3>Library</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p>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>
                <button>EXPLORE</button>
            </div>
            <div class="box5">
                <h3>Library</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p>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>
                <button>EXPLORE</button>
            </div>
            <div class="box6">
                <a href=""><img src="images/b3.jpg" alt=""></a>
            </div>
            <div class="box7">
                <h3>Library</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                <p>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>
                <button>EXPLORE</button>
            </div>
            <div class="box8">
                <a href=""><img src="images/b4.jpg" alt=""></a>
            </div>
        </div>
        <!--gallery区域 分为上下两部分 分为6个列表标签 定义列表  -->
        <div class="gallery">
            <!--  gallery上半部分 -->
            <div class="gallery-top">
                <h2>GALLERY</h2>
                <div class="line">分割线</div>
                <p>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>
            <!-- gallery 下半部分 -->
            <div class="gallery-bottom">
                <dl>
                    <a href="">
                        <dt><img src="images/03-01.jpg" alt=""></dt>
                        <dd>Science Lab</dd>
                    </a> 
                </dl>
                <dl>
                    <a href="">
                        <dt><img src="images/03-02.jpg" alt=""></dt>
                        <dd>Indoor Stadium</dd>
                    </a> 
                </dl>
                <dl>
                    <a href="">
                        <dt><img src="images/03-03.jpg" alt=""></dt>
                        <dd>Transportation</dd>
                    </a>
                </dl>
                <dl>
                    <a href="">
                        <dt><img src="images/03-04.jpg" alt=""></dt>
                        <dd>Kids Room</dd>
                    </a>  
                </dl>
                <dl>
                    <a href="">
                        <dt><img src="images/03-05.jpg" alt=""></dt>
                        <dd>Meditation Classes</dd>
                    </a>  
                </dl>
                <dl>
                    <a href="">
                        <dt><img src="images/03-06.jpg" alt=""></dt>
                        <dd>Kids Play Ground</dd>
                    </a>
                </dl>
            </div>
        </div>
    </section>
    <!-- 页脚区域 -->
    <footer>
        <p>&copy;2016 imooc.com 京ICP备13046642号</p>
    </footer>