老师，请检查

css.css

* {
margin: 0;
padding: 0;
}

li {
list-style: none;
}

a {
text-decoration: none;
}

header {
width: 100%;
height: 80px;
background: #07cbc9;
overflow: hidden;
}

div.top-bar {
width: 1200px;
height: 48px;
margin: 16px auto;
}

div.top-bar .logo {
float: left;
}

div.top-bar nav {
float: right;
}

div.top-bar nav ul {
height: 48px;
}


div.top-bar nav ul li {
float: left;
color: white;
font-size: 16px;
margin-right: 20px;
line-height: 48px;
}

div.top-bar nav ul li:last-child {
margin-right: 0;
}

section.banner {
width: 100%;
height: 600px;
position: relative;
}

section.banner .banner-pic img {
width: 100%;
height: 600px;
}

section.banner .banner-shade {
width: 100%;
height: 600px;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
}

section.banner .form-list {
width: 504px;
height: 350px;
position: absolute;
left: 50%;
margin-left: -252px;
top: 100px;
text-align: center;
}

section.banner .form-list .fm {
display: block;
width: 500px;
height: 40px;
border-color: #808080;
color: #808080;
background: none;
margin-bottom: 20px;
border: 2px solid #808080;
}

section.banner .form-list .cmt {
width: 500px;
height: 110px;
border-color: #808080;
background: none;
border: 2px solid #808080;
}

section.banner .form-list .submit {
width: 200px;
height: 40px;
background: none;
margin-top: 20px;
color: #808080;
border-color: #808080;
border: 2px solid #808080;
}

main.about-info {
width: 1201px;
margin: 30px auto;
}

main.about-info section.up h3 {
font-size: 32px;
text-align: center;
}

.line {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}

main.about-info section.up p {
color: gray;
font-size: 14px;
text-align: center;
}

main.about-info section.down {
/* width: 1201px;
    height: 464px; */
position: relative;
padding-top: 30px;
overflow: hidden;
}

main.about-info section.down img {
width: 650px;
float: left;
margin-left: 120px;
}

main.about-info section.down .left {
float: left;
}

main.about-info section.down .left .box1 {
margin-bottom: 20px;
}

main.about-info section.down .left h3 {
font-size: 28px;
font-weight: bold;
}

main.about-info section.down .left .box2 {
width: 300px;
padding: 20px;
font-size: 18px;
border: 1px solid gray;
background: rgba(255, 255, 255, 0.5);
position: absolute;


}

main.about-info section.down .left .box2 a {
display: block;
width: 140px;
height: 40px;
background-color: black;
color: white;
text-align: center;
line-height: 40px;
margin-top: 30px;
}

main.about-info section.down .right {
float: right;


}

main.about-info section.down .right .item {

width: 260px;
padding: 40px 0;
text-align: center;
border: 1px solid #07cbc9;

}

main.about-info section.down .right .item .num {
font-size: 28px;
font-weight: bold;
}

main.about-info section.down .right .item:first-child {
margin-bottom: 30px;
}

/* 图片混排区 */
main.Library {
width: 100%;
}

main.Library image {
display: block;
}

main.Library .text {
background-color: #07cbc9;
box-sizing: border-box;
padding: 20px;
position: relative;
}


main.Library .text h3 {
font-size: 24px;
margin-bottom: 30px;
color: white;
font-weight: bold;
}

main.Library .text a {
display: block;
width: 138px;
height: 40px;
background-color: black;
color: white;
text-align: center;
line-height: 40px;
margin: 0 auto;
}

main.Library .text .p1 {
font-size: 16px;
color: white;
margin-bottom: 20px;
}

main.Library .text .p2 {
font-size: 14px;
color: gray;
margin-bottom: 30px;
}

main.Library .r1 {
width: 100%;
overflow: hidden;
}

main.Library .r1 .text::before {
content: '';
width: 0;
height: 0;
border: 40px solid transparent;
border-right-color: #07cbc9;
position: absolute;
top: 50%;
margin-top: -20px;
left: -80px;

}

main.Library .r2 .text::before {
content: '';
width: 0;
height: 0;
border: 40px solid transparent;
border-left-color: #07cbc9;
position: absolute;
top: 50%;
margin-top: -20px;
right: -80px;
}

main.Library .r1 .item {
float: left;
width: 25%;
height: 380px;
}

main.Library .r2 {
width: 100%;
overflow: hidden;
}

main.Library .r2 .item {
float: left;
width: 25%;
height: 380px;
}

main.gallery-info {
width: 1201px;
margin: 30px auto;
}

main.gallery-info .g-up h3 {
font-size: 32px;
text-align: center;
}

.line {
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}

main.gallery-info .g-up p {
color: gray;
font-size: 14px;
text-align: center;
}

main.gallery-info .g-down {
width: 1160px;
margin: 0 auto;
overflow: hidden;
padding: 20px;

}

main.gallery-info .g-down dl {
float: left;
width: 360px;
height: 290px;
position: relative;
margin-right: 40px;
background-color: black;
margin-bottom: 30px;
}

main.gallery-info .g-down dl.r2 {
margin-bottom: 0;
}

main.gallery-info .g-down .spec {
margin-right: 0;
}

main.gallery-info .g-down dl dt img {
display: block;
}

main.gallery-info .g-down dl dd {
position: absolute;
width: 340px;
height: 50px;
left: 0;
bottom: 0;
line-height: 50px;
margin-left: 20px;
color: white
}

footer {
width: 100%;
background-color: #07cbc9;
height: 80px;
text-align: center;
line-height: 80px;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>career builder</title>
<link rel="stylesheet" href="css/css.css">
</head>

<body>
<!-- 网页头部 -->
<header>
<div class="top-bar">
<!-- 网页左侧logo-->
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<!-- 网页右侧导航条-->
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</header>
<!-- 网页banner区域 -->
<section class="banner">
<!-- banner图片 -->
<div class="banner-pic">
<img src="images/banner3.jpg" alt="">
</div>
<!-- banner遮罩层 -->
<div class="banner-shade"></div>
<!-- banner 表单 -->
<form action="" method="" class="form-list">
<input type="text" placeholder="your Name" class="name fm">
<input type="text" placeholder="your Phone" class="phone fm">
<input type="email" placeholder="your Email" class="email fm">
<textarea class="cmt" rows="5" cols="20" placeholder="write your comment Here"></textarea>
<input class="submit" type="submit" value="SEND MESSAGE">

</form>

</section>

<!-- about 区域 -->
<main class="about-info">
<!-- about上半部分 -->
<section class="up">
<h3>ABOUT</h3>
<div class="line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting <br> industry. Lorem Ipsum has been the
industry's standard dummy <br> text ever since the 1500s.</p>
</section>
<!-- about下半部分 -->
<section class="down">

<!-- about 下面左侧文字 -->
<div class="left">
<div class="box1">
<h3>A WORD </h3>
<h3>ABOUT US</h3>
</div>
<div class="box2">
<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>
<a href="">EXPLORE</a>
</div>
</div>

<!-- about下面中间图片 -->
<img src="images/bb3.jpg" alt="">

<!-- about右边 -->
<div class="right">
<div class="students item">
<p class="num">70000</p>
<div class="line"></div>
<p>Students</p>
</div>
<div class="faculty item ">
<p class="num">600</p>
<div class="line"></div>
<p>Faculty</p>
</div>
</div>

</section>
</main>
<!-- 图文混排区 -->
<main class="Library">
<!-- 第一行 -->
<div class="r1">
<!-- 图片1 -->
<img src="images/b1.jpg" class="item" alt="">
<!-- 文字1 -->
<div class="text item">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<p class="p2">
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>
<a href="">EXPLORE</a>
</div>

<!-- 图片2 -->
<img src="images/b2.jpg" class="item" alt="">

<!-- 文字2 -->
<div class="text item">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing and
<br>typesetting industry
</p>
<p class="p2">
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>
<a href="">EXPLORE</a>
</div>
</div>

<!-- 第二行 -->
<div class="r2 ">
<!-- 文字3 -->
<div class="text item">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing and
<br>typesetting industry
</p>
<p class="p2">
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>
<a href="">EXPLORE</a>
</div>
<!-- 图片3 -->

<img src="images/b3.jpg" class="item" alt="">

<!-- 文字4 -->
<div class="text item">
<h3>Library</h3>
<p class="p1">
Lorem Ipsum is simply dummy text of the printing and
<br>typesetting industry
</p>
<p class="p2">
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>
<a href="">EXPLORE</a>
</div>
<!-- 图片4 -->
<img src="images/b4.jpg" class="item" alt="">

</div>

</main>

<!-- gallery区域 -->
<main class="gallery-info">
<!-- gallery 上半部分 -->
<div class="g-up">
<h3>GALLERY</h3>
<div class="line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting<br>industry Lorem Ipsum has been the
industry's standard dummy<br>text ever since the 1500s
<p>
</div>
<!-- gallery 下半部分 -->
<div class="g-down">
<dl class="r1">
<dt>
<img src="images/03-01.jpg" alt="">
</dt>
<dd>Science Lab</dd>
</dl>
<dl class="r1">
<dt>
<img src="images/03-02.jpg" alt="">
</dt>
<dd>Indoor Stadium</dd>
</dl>
<dl class="r1 spec">
<dt>
<img src="images/03-03.jpg" alt="">
</dt>
<dd>Transportation</dd>
</dl>
<dl class="r2">
<dt>
<img src="images/03-04.jpg" alt="">
</dt>
<dd>Kids Room</dd>
</dl>
<dl class="r2">
<dt>
<img src="images/03-05.jpg" alt="">
</dt>
<dd>Meditation Classes</dd>
</dl>
<dl class="r2 spec">
<dt>
<img src="images/03-06.jpg" alt="">
</dt>
<dd>Kids Play Ground</dd>
</dl>
</div>
</main>
<!-- 页脚 -->
<footer>
<p>&copy; 2016 imooc.com 京ICP备13046642号</p>
</footer>

</body>

</html>