* {
    margin: 0;
    padding: 0;
}
/* 清除列表默认项目符号样式 */
ul, ol {
    list-style: none;
}
/* 清除超级链接下划线 */
a {
    text-decoration: none;
}

/* header区域 */
header {
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
}
/* header主体区域 */
header .main-header {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
/* logo */
header .main-header .logo {
    padding-top: 16px;
    padding-bottom: 16px;
    width: 260px;
    height: 48px;
    float: left;
}
/* 导航条右浮动 */
header .main-header .main-nav {
    float: right;
}
/* 导航条列表 */
header .main-header .main-nav ul li {
    float: left;
    text-align: center;
    line-height: 80px;
    margin-left: 20px;
}
/* 导航条列表超链接 */
header .main-header .main-nav ul li a {
    font-size: 16px;
    color: white;
}

/* banner区域 */
.banner {
    width: 100%;
    position: relative;
}
/* banner图片 */
.banner .pic .banner-pic {
    width: 100%;
    height: 600px;
}
/* banner遮罩层 */
.banner .masklayer {
    position: absolute;
    background-color: rgba(0,0,0,.5);
    width: 100%;
    height: 600px;
    top: 0;
    left: 0;
}
/* banner表单 */
.banner .form {
    position: absolute;
    width: 504px;
    height: 350px;
    left: 50%;
    margin-left: -252px;
    top: 100px;
    text-align: center;
}
/* banner表单整体通用设置 */
.banner .form form .inp {
    width: 500px;
    height: 36px;
    margin-bottom: 20px;
    background: none;
    border: 2px solid #808080;
}
/* banner表单textarea区域 */
.banner .form form .textarea {
    width: 500px;
    height: 106px;
    margin-bottom: 20px;
}
/* banner表单提交按钮 */
.banner .form form .summit-button {
    width: 196px;
    height: 36px;
    border: 2px solid #808080;
    color: #808080;
    background: none;
    cursor: pointer;
}

/* about区域 */
.about {
    width: 1201px;
    margin: 0 auto;
    padding-top: 30px;
    overflow: hidden;
}
/* about区域上部分标题居中 */
.about .part1 h2 {
    font-size: 32px;
    text-align: center;
}
/* 分割线 */
.about .part1 .cutting-line {
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
/* about区域上部分文字居中 */
.about .part1 p {
    text-align: center;
    color: gray;
    font-size: 14px;
    width: 450px;
    margin: 0 auto;
}
/* about区域下部分 */
.about .part2 {
    width: 1201px;
    height: 435px;
    position: relative;
    padding-top: 30px;
}
.about .part2 .p2-left {
    float: left;
}
/* about区域下部分左侧标题 */
.about .part2 .p2-left h3 {
    width: 180px;
    font-size: 32px;
    padding-bottom: 30px;
}
/* about区域下部分框内部分 */
.about .part2 .p2-left .info {
    position: absolute;
    border: 1px solid gray;
    background: rgba(255, 255, 255, .5);
    width: 300px;
    padding: 20px;
}
.about .part2 .p2-left .info .description {
    font-size: 18px;
    padding-bottom: 20px;
}
.about .part2 .p2-left .about-link {
    display: block;
    background-color: black;
    color: white;
    width: 140px;
    height: 40px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
}
/* about区域下部分右侧 */
.about .part2 .p2-right {
    float: right;
}
.about .part2 .p2-right .r1 {
    border: 1px solid #07cbc9;
    width: 258px;
    height: 164px;
    margin-bottom: 30px;
}
.about .part2 .p2-right .r1 .number {
    font-size: 28px;
    font-weight: bold;
    padding-top: 40px;
    text-align: center;
}
.about .part2 .p2-right .r1 .cutting-line {
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
.about .part2 .p2-right .r1 .item {
    font-size: 18px;
    padding-bottom: 40px;
    text-align: center;
}
.about .part2 .p2-right .r2 {
    border: 1px solid #07cbc9;
    width: 258px;
    height: 164px;
}
.about .part2 .p2-right .r2 .number {
    font-size: 28px;
    font-weight: bold;
    padding-top: 40px;
    text-align: center;
}
.about .part2 .p2-right .r2 .cutting-line {
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
}
.about .part2 .p2-right .r2 .item {
    font-size: 18px;
    padding-bottom: 40px;
    text-align: center;
}
.about .part2 .p2-img {
    float: left;
    width: 650px;
    height: 435px;
    margin-left: 70px;
}

​<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Career Builder - Build Your Career</title>
    <meta name="Keywords" content="career, builder">
    <meta name="Description" content="With Career Builder, your career can be built.">
    <link rel="stylesheet" href="css/css.css">
</head>

<body>
    <!-- Header 区域 -->
    <header>
        <!-- header主体区域 -->
        <div class="main-header">
            <!-- logo -->
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <!-- 导航 -->
            <nav class="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>
        </div>
    </header>

    <!-- Banner区域 -->
    <div class="banner">
        <!-- 图片 -->
        <div class="pic">
            <img class="banner-pic" src="images/banner3.jpg" alt="">
        </div>
        <!-- 遮罩层 -->
        <div class="masklayer"></div>
        <!-- 表单 -->
        <div class="form">
            <form action="" method="POST">
                <input class="name inp" type="text" placeholder="your Name">
                <input class="phone inp" type="text" placeholder="your Phone">
                <input class="email inp" type="email" placeholder="your Email">
                <textarea class="textarea inp" cols="30" rows="10" placeholder="Write Your Comment Here"></textarea><br/>
                <input class="summit-button" type="submit" value="SEND MESSAGE">
            </form>
        </div>
    </div>

    <!-- about区域 -->
    <div class="about">
        <!-- about区域上部分 -->
        <div class="part1">
            <!-- 标题 -->
            <h2>ABOUT</h2>
            <!-- 简短描述区域 -->
            <div class="cutting-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="part2">
            <!-- 详细描述区 -->
            <!-- about区域下部分左侧 -->
            <div class="p2-left">
                <h3>A WORD ABOUT US</h3>
                <!-- 框内部分 -->
                <div class="info">
                    <P class="description">Praesent dignissim viverra est, sed bibendumligula congue non. Sed ac nisl et felis gravidacommodo? Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</P>
                    <a class="about-link" href="">EXPLORE</a>
                </div>   
            </div>
            <!-- about区域下部分图片 -->
            <img class="p2-img" src="images/bb3.jpg" alt="">
            <!-- about区域下部分右侧 -->
            <div class="p2-right">
                <!-- 右侧上方框 -->
                <div class="r1">
                    <p class="number">70000</p>
                    <div class="cutting-line"></div>
                    <p class="item">Students</p>
                </div>
                <!-- 右侧下方框 -->
                <div class="r2">
                    <p class="number">600</p>
                    <div class="cutting-line"></div>
                    <p class="item">Faculty</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 图文混排区域 -->
    <div class="pic-and-text">
        <!-- 图片1 -->
        <div class="img1">
            <img src="images/b1.jpg" alt="">
        </div>
        <!-- 文字2 -->
        <div class="text2">
            <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>
            <p><a href="">EXPLORE</a></p>
        </div>
        <!-- 图片3 -->
        <div class="img3">
            <img src="images/b2.jpg" alt="">
        </div>
        <!-- 文字4 -->
        <div class="text4">
            <h3>Computer Lab</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>
            <p><a href="">EXPLORE</a></p>
        </div>
        <!-- 图片5 -->
        <div class="img5">
            <img src="images/b3.jpg" alt="">
        </div>
        <!-- 文字6 -->
        <div class="text6">
            <h3>Conference Hall</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>
            <p><a href="">EXPLORE</a></p>
        </div>
        <!-- 图片7 -->
        <div class="img7">
            <img src="images/b4.jpg" alt="">
        </div>
        <!-- 文字8 -->
        <div class="text8">
            <h3>Playground</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>
            <p><a href="">EXPLORE</a></p>
        </div>
    </div>

    <!-- Gallery区域 -->
    <div class="gallary">
        <!-- Gallery上半部分 -->
        <div class="part1">
            <!-- 标题 -->
            <h2>GALLERY</h2>
            <!-- 简短描述区域 -->
            <p>分割线</p>
            <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>
        <!-- Gallery下半部分 -->
        <div class="part2">
            <!-- 详细信息区 -->
            <dl>
                <dt><img src="images/03-01.jpg" alt=""></dt>
                <dd>Science Lab</dd>
            </dl>
            <dl>
                <dt><img src="images/03-02.jpg" alt=""></dt>
                <dd>Indoor Stadium</dd>
            </dl>
            <dl>
                <dt><img src="images/03-03.jpg" alt=""></dt>
                <dd>Transportation</dd>
            </dl>
            <dl>
                <dt><img src="images/03-04.jpg" alt=""></dt>
                <dd>Kids Room</dd>
            </dl>
            <dl>
                <dt><img src="images/03-05.jpg" alt=""></dt>
                <dd>Meditation Classes</dd>
            </dl>
            <dl>
                <dt><img src="images/03-06.jpg" alt=""></dt>
                <dd>Kids Play Ground</dd>
            </dl>
        </div>
    </div>

    <!-- 页脚区域 -->
    <footer>
        <!-- 文字内容 -->
        <p>&copy;2016 imooc.com 京ICP备13046642号</p>
    </footer>   
</body>

</html>