# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

*{

    padding: 0;

    margin: 0;

}

hr{

    border: none;

}

.header{

    width: 100%;

    height: 80px;

    background-color: #07cbc9;

}

.header .header2{

    width: 1200px;

    height: 80px;

    margin: 0 auto;

}

.header .header2 .logo{

    float: left;

    height: 48px;

    margin: 16px 0;

}

.header .header2 .nav{

    float: right;

}

.header .header2 .nav ul{

    list-style: none;

}

.header .header2 .nav ul li{

    float: left;

    margin-right: 20px;

    height: 50px;

}

.header .header2 .nav ul li a{

    display: block;

    text-decoration: none;

    color: white;

    font-size: 16px;

    line-height: 80px;

}

.header .header2 .nav ul li a:hover{

    background-color: rgb(238, 210, 87);

}

.banner{

    position: relative;

    width: 100%;

}

.banner .banner-img{

    width: 100%;

    height: 600px;

}

.banner .center{

    position: absolute;

    width: 100%;

    height: 600px;

    top: 0;

    background: rgba(0, 0, 0, 0.5);

}

.banner .center .form1{

    position: absolute;

    width: 508px;

    left: 50%;

    margin-left: -254px;

    margin-top: 90px;

    text-align: center;

}

.banner .center .form1 input{

    background: none;

    width: 504px;

    height: 40px;

    border: 1px solid #808080;

    margin-top: 20px;

} 

.banner .center .form1 input:last-child{

    width: 200px;

    color:#808080 ;

}

.banner .center .form1 textarea{

    width: 504px;

    height: 110px;

    background: none;

    margin-top: 20px;

}

.about{

    width: 100%;

    text-align: center;

    margin-top: 30px;

}

.about h3{

    font-size: 32px;

}

.about hr{

    width: 60px;

    height: 3px;

    background: #07cbc9;

    margin: 10px auto; 

}

.about p{

    color: gray;

    font-size: 14px;

}

.about2{

    width: 100%;

    height: 464px;

    margin-top: 30px;

}

.about2 .content{

    position: relative;

    width: 1201px;

    height: 464px;

    margin: 0 auto;

}

.about2 .content hr{

    width: 60px;

    height: 3px;

    background: #07cbc9;

    margin: 10px auto; 

}

.about2 .content .hh{

    position: absolute;

    margin-top: 10px;

}

.about2 .content .hh h3{

    font-size: 32px;

}

.about2 .content .wordabout{

    position: absolute;

    width: 300px;

    padding: 20px;

    font-size: 18px;

    border: 1px solid gray;

    background: rgba(255,255,255,0.5);

    z-index: 6;

    top: 50%;

    margin-top: -120px;

}

.about2 .content .wordabout .expl{

    background-color: #000;

    width: 138px;

    height: 38px;

    border: 1px solid #000;

    font-size: 18PX;

    color: honeydew;

    text-align: center;

    line-height: 40px;

    margin-top: 20px;

}

.about2 .content img{

    position: absolute;

    width: 650px;

    height: 435px;

    left: 50%;

    margin-left: -325px;

}

.about2 .content .student{

    width: 260px;

    position: absolute;

    right: 0;

    top: 0;

    text-align: center;

    padding: 40px 0;

    border: 1px solid #07cbc9;

}

.about2 .content .student h3{

    font-size: 28px;

    font-weight: bold;

}

.about2 .content .faculty{

    padding: 40px 0;

    line-height: 40px;

    width: 260px;

    position: absolute;

    right: 0;

    top: 190px;

    text-align: center;

    border: 1px solid #07cbc9;

}

.about2 .content .faculty h3{

    font-size: 28px;

    font-weight: bold;

}

.textwrap{

    width: 100%;

    overflow: hidden;

    position: relative;

}

.textwrap .wrap{

    float: left;

    width: 25%;

    height: 380px;

}

.textwrap .wrap img{

    width: 100%;

    height: 100%;

}

.textwrap .text{

    box-sizing: border-box;

    float: left;

    width: 25%;

    height: 380px;

    padding: 20px;

    background-color: #07cbc9;

    position: relative;

}

.textwrap .texttop::before{

    content: "";

    width: 0;

    height: 0;

    border: 30px solid transparent;

    border-right-color: #07cbc9;

    position: absolute;

    left: -60px;

    top: 170px;

}

.textwrap .textbottom::before{

    content: "";

    width: 0;

    height: 0;

    border: 30px solid transparent;

    border-left-color: #07cbc9;

    position: absolute;

    right: -60px;

    top: 170px;

}

.textwrap .text h3{

    margin-bottom: 30px;

    font-size: 24px;

    color: white;

}

.textwrap .text .text1{

    font-size: 16px;

    color: white;

    margin-bottom: 20px;

}

.textwrap .text .text2{

    font-size: 14px;

    color: gray;

}

.textwrap .text button{

    display: block;

    margin: 30px auto;

    background-color: #000;

    width: 138px;

    height: 38px;

    border: 1px solid #000;

    font-size: 18PX;

    color: honeydew;

    text-align: center;

    line-height: 40px;

}

.gallery .image-text{

    width: 1160px;

    height: 613px;

    padding: 20px;

    margin: 0 auto;

}

.gallery .image-text dl{

    float: left;

    margin-right: 40px;

}

.gallery .image-text dl.sp2{

    margin-bottom: 30px;

}

.gallery .image-text dl.sp{

    margin-right: 0;

}

.gallery .image-text dl dt img{

    width: 360px;

    height: 240px;

    display:block;

}

.gallery .image-text dl dd{

    color: white;

    background-color: rgb(0, 0, 0);

    width: 360px;

    height: 50px;

}

.gallery .image-text dl dd span{

    margin-left: 20px;

    line-height: 50px;

}

.footer{

    text-align: center;

    width: 100%;

    background-color: #07cbc9;

    height: 80px;

    line-height: 80px;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/css.css">

</head>

<body>

    <!--Header页面头部  -->

    <div class="header">

        <div class="header2">

            <!-- logo -->

            <div class="logo">

                <img src="images/logo.png" alt="">

            </div>

            <!-- nav -->

            <div class="nav">

                <ul>

                    <li><a href="#">HOME</a></li>

                    <li><a href="#">ABOUT</a></li>

                    <li><a href="#">GALERY</a></li>

                    <li><a href="#">FACULTY</a></li>

                    <li><a href="#">EVENTS</a></li>

                    <li><a href="#">CONTACT</a></li>

                </ul>

            </div>

        </div>

    </div>

    <!--Banner页面横幅  -->

    <div class="banner">

        <!-- images -->

        <div>

            <img class="banner-img" src="images/banner3.jpg" alt="">

        </div>

        <!-- 遮罩层 -->

        <div class="center">

            <!-- 表单 -->

            <form class="form1" action="">

                <input type="text" placeholder="your Name">

                <input type="password" placeholder="your Phone">

                <input type="email" placeholder="your Email">

                <textarea name="" id="" cols="30" rows="10" placeholder="Wirte Your Connent Here"></textarea>

                <input type="submit" value="SEND MESSAGE">

            </form>

        </div>

    </div>

    

    <!--About 简介 -->

        <div class="about">

            <!-- 标题和简短描述 -->

            <h3>ABOUT</h3>

            <!-- 分割线 -->

            <hr>

            <p>

                Lorem Ipsum is simply dummy text of the printing and typesetting<br> industry. Lorem Ipsum has been the

                industry's standard dummy text<br> ever since the 1500s.

            </p>

        </div>

    <div class="about2">

        <div class="content">

            <!-- 详细描述 -->

            <div class="hh">

                <h3>A WORD </h3>

                <h3>ABOUT US</h3>

            </div>

            <div class="wordabout">

                <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 class="expl">EXPLORE</BUtton>

            </div>

            <img src="images/bb3.jpg" alt="">

            

            <div class="student">

                <h3>70000</h3>

                <!-- 分割线 -->

                <hr>

                <p>Students</p> 

            </div>

            

            <div class="faculty">

                <h3>600</h3>

                <!-- 分割线 -->

                <hr>

                <p>Faculty</p>

            </div>

        </div>

    </div>

    

    <!--图文混排区域  -->

    <div class="textwrap">

        <div class="wrap1 wrap ">

            <img src="images/b1.jpg" alt="">

        </div>

        <div class="texttop text">

            <h3>Library</h3>

            <p class="text1">

                Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="text2">

                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="wrap2 wrap">

            <img src="images/b2.jpg" alt="">

        </div>

        <div class="texttop text">

            <h3>Library</h3>

            <p class="text1">

                Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="text2">

                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="textbottom text">

            <h3>Library</h3>

            <p class="text1">

                Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="text2">

                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="wrap3 wrap">

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

        </div>

        <div class="textbottom text">

            <h3>Library</h3>

            <p class="text1">

                Lorem Ipsum is simply dummy text of the printing and typesetting industry

            </p>

            <p class="text2">

                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="wrap4 wrap">

            <img src="images/b4.jpg" alt="">

        </div>

    </div>

    <!--Gallery画廊区域  -->

    <div class="gallery">

        <!-- 标题和简短描述 -->

        <div class="about">

            <h3>GALERY</h3>

            <!-- 分割线 -->

            <hr>

            <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>

        <!-- 详细描述 -->

        <div class="image-text">

            <dl class="sp2">

                <dt><img src="images/03-01.jpg" alt=""></dt>

                <dd><span>Science Lab</span></dd>

            </dl>

            <dl class="sp2">

                <dt><img src="images/03-02.jpg" alt=""></dt>

                <dd><span>Indoor Stadium</span></dd>

            </dl>

            <dl class="sp sp2">

                <dt><img src="images/03-03.jpg" alt=""></dt>

                <dd><span>Transportation</span></dd>

            </dl>

            <dl>

                <dt><img src="images/03-04.jpg" alt=""></dt>

                <dd><span>Kids Room</span></dd>

            </dl>

            <dl>

                <dt><img src="images/03-05.jpg" alt=""></dt>

                <dd><span>Meditation Classes</span></dd>

            </dl>  

            <dl class="sp">

                <dt><img src="images/03-06.jpg" alt=""></dt>

                <dd><span>Kids Play Ground</span></dd>

            </dl>  

        </div>

    </div>

    <!--Footer页脚  -->

    <div class="footer">

        ©2016 imooc.com 京icp备13046642

    </div>

<div class="n5"></div>

</body>

</html>