三角

来源：2-17 自由编程

海波_

2021-05-29 18:08:28

<!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>Document</title>
</head>
<link rel="stylesheet" href="css/css.css">

<body>
    <!-- Header区域 -->
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="logo">


            <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>GALERY</li>
                <li>FACULTY</li>
                <li>EVENTS</li>
                <li>CONTAAC</li>
            </ul>
        </div>

    </header>
    <!-- banner区域 -->
    <div class="banner">
        <img src="images/banner3.jpg" alt="banner3">
        <div class="zhezhaoceng">
            <form action="">
                <input type="text" placeholder="your Name"><br>
                <input type="text" placeholder="your Pone"><br>
                <input type="email" placeholder="your Email"><br>
                <textarea name="" id="" cols="30" rows="10" placeholder="Write Your Comment Here "></textarea><br>
                <input type="submit" value="SEND MESSAGE" class="submit1">
            </form>
        </div>

    </div>
    <!-- about区域 -->
    <div class="about">

        <div class="aboutup">
            <h4>ABOUT</h4>
            <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="aboutdown">
            <H4>A WORD <br> ABOUT US</H4>
            <div class="down1">
                <P class="down11">Praesent dignissim viverra est, sed bibendum ligula congue non. Sed ac nisl et felis
                    gravida commodo?
                    Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.</P>
                <P class="down12">EXPLORE</P>
            </div>

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

            <div class="about-right">
                <div class="down2">
                    <p class="down21">7000</p>
                    <hr>
                    <p class="down22">Student</p>
                </div>
                <div class="down3">
                    <p class="down31">600</p>
                    <hr>
                    <p class="down32">Faculty</p>
                </div>
            </div>


        </div>

    </div>
    <!-- 图片文字区域 -->
    <div class="picture-text">
        <div class="picture">
            <img src="images/b1.jpg" alt="b1">
        </div>

        <div class="text1">

            <div class="text10">
                <p>Library</p>
            </div>


            <div class="text11">
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
            </div>
            <div class="text12">
                <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>
            <div class="text13">
                <p>EXPLORE</p>
            </div>
        </div>
        <div class="picture">
            <img src="images/b2.jpg" alt="b2">
        </div>
        <div class="text1">
            <div class="text10">
                <p>Library</p>
            </div>
            <div class="text11">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry
                </p>
            </div>

            <div class="text12">
                <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>
            <div class="text13">
                <p>EXPLORE</p>
            </div>
        </div>
        <div class="text1">
            <div class="text10">
                <p>Library</p>
            </div>
            <div class="text11">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry
                </p>
            </div>
            <div class="text12">
                <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>
            <div class="text13">
                <p>EXPLORE</p>
            </div>


        </div>

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

        <div class="text1">
            <div class="text10">
                <p>Library</p>
            </div>
            <div class="text11">
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry
                </p>
            </div>
            <div class="text12">
                <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>
            <div class="text13">
                <p>EXPLORE</p>
            </div>

        </div>
        <div class="picture">
            <img src="images/b4.jpg" alt="b4">
        </div>
    </div>
    <!-- gallery区域 -->
    <div>
        <div class="gallery-up">
            <h4>GALLERY</h4>
            <hr>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting <br>
                industry. Lorem Ipsum has been the <br>
                industry's standard dummy
                text ever since the 1500s.</p>
        </div>
        <div class="gallery-down">
            <div>
                <dl>
                    <dt>
                        <img src="images/03-01.jpg" alt="">
                    </dt>
                    <dd>Science Lab</dd>
                </dl>
            </div>
            <div class="gallery-down1">
                <dl>
                    <dt>
                        <img src="images/03-02.jpg" alt="">
                    </dt>
                    <dd>Indoor Stadium</dd>
                </dl>
            </div>
            <div class="gallery-down2">
                <dl>
                    <dt>
                        <img src="images/03-03.jpg" alt="">
                    </dt>
                    <dd>Transportation</dd>
                </dl>
            </div>
            <div class="gallery-down3">
                <dl>
                    <dt>
                        <img src="images/03-04.jpg" alt="">
                    </dt>
                    <dd>Kids Room</dd>
                </dl>
            </div>
            <div class="gallery-down4">
                <dl>
                    <dt>
                        <img src="images/03-05.jpg" alt="">
                    </dt>
                    <dd>Meditation Classes</dd>
                </dl>
            </div>
            <div class="gallery-down5">
                <dl>
                    <dt>
                        <img src="images/03-06.jpg" alt="">
                    </dt>
                    <dd>Kids Play Ground</dd>
                </dl>
            </div>
        </div>

    </div>

    </div>
    <!-- Footer区域 -->
    <footer>
        <div class="footer1">
            <p>&copy;2016 imooc.com 京ICP备13046642号</p>
        </div>
    </footer>
</body>


</html>

*{
    margin: 0%;
    padding: 0%;
}
header{
    height: 80px;
    background-color: #07cbc9;
}
ul,ol{
    text-decoration: none;
    list-style: none;
}
a{
    list-style: none;
    text-decoration: none;
}
header .logo{
    width: 1200px;
    margin: 0 auto;
}
header .logo img{
    float: left;
    height: 48px;
    margin-top: 16px;
}
header .logo ul{

    float: right;
    line-height: 80px;

}
header .logo ul li{

    float: left;
    margin-left: 20px;
    color: aliceblue;
    font-size: 16px;
    line-height: 80px;
}
.banner{
    width: 100%;
    height: 600px;
    position: relative;
    margin-bottom: 20px;
}
.banner img{
    width: 100%;
    height: 600px;

}
.banner .zhezhaoceng {
    width: 100%;
    height: 600px;
    background-color: rgba(0,0, 0, .5);
    position: absolute;
    left: 0;
    top: 0;
}
.banner .zhezhaoceng form{
    position: absolute;
    top: 100px;
    width: 504px;
     left: 50%;
     margin-left: -252px;
     text-align: center;

}
.banner .zhezhaoceng form input{
    height: 40px;
    width: 504px;
    margin-top: 10px;
    background: none;
    border: 2px solid #808080;
}
.banner .zhezhaoceng form textarea{
    height: 110px;
    width: 504px;
    margin-top: 10px;
    background: none;
    border: 2px solid #808080;
}
.banner .zhezhaoceng form .submit1{
    height: 40px;
    width: 200px;
    background: none;
    border: 2px solid #808080;
    color: #808080;
}
.about .aboutup h4{
    list-style: 92px;
    font-size: 32px;
    text-align: center;
}
hr{
    width: 60px;
    height: 3px;
    background-color: #07cbc9;
    margin: 10px auto;
    border: none;
}
.about .aboutup p{
    text-align: center;
    color: gray;
    font-size: 14px;
}
.about .aboutdown{

    width: 1201px;
    height: 464px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
    margin-bottom: 20px;

}
.about .aboutdown img{
    width: 650px;
    height: 435px;
    margin-left: 110px;
}
.about .aboutdown h4{
    float: left;
    font-size: 28px;
}
.about .aboutdown .down1{
    float: left;
    position: absolute;
    top: 50%;
    margin-top: -125px;
    width: 340px;
    height: 250px;
    padding: 20px;
    border: 1px solid gray;
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    z-index: 999;

}
.about .aboutdown .down1 .down11{

    font-size: 18px;
    width: 300px;
}
.about .aboutdown .down1 .down12{
    position: absolute;
    bottom: 20px;
    display: block;
    width: 140px;
    height: 40px;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 40px;
}

.about .aboutdown  .about-right {
    position: relative;
    float: right;
}
.about .aboutdown  .about-right .down2,.about .aboutdown .about-right .down3{
    width: 260px;
    padding: 40px 0;
    border: 1px solid #07cbc0;
    text-align: center;
    margin-bottom: 20px;
}
.picture-text{
    width: 100%;
    height: 800px;
    margin-bottom: 20px;
}
.picture-text .picture img{
    float: left;
    width: 25%;
    height: 400px;

}
.picture-text .text1{
    float: left;
    width: 25%;
    height: 400px;
    background-color: #07cbc0; 
    position: relative;
}
.picture-text .text1::before{
    height: 0%;
    width: 0%;
    border: 200px solid transparent;
    border-right-color: #07cbc0;
    position: absolute;
    top: 50%;
    left: -25px;
}
.picture-text .text1 .text10{
    font-size: 24px;
    margin: 20px 0 0 20px;
    font-weight: bold;
    color: white;
}
.picture-text .text1 .text11{
    font-size: 16px;
    margin-top: 30px;
    margin-left: 20px; 
    color: white;
}
.picture-text .text1 .text12{
    font-size: 16px;
    margin-top: 20px;
    margin-left: 20px; 
    color: gray;
}
.picture-text .text1 .text13{
    font-size: 16px;
   margin: 20px auto;
    width: 138px;
    height: 40px;
    background-color: #000; 
    color: white;
    text-align: center;
    line-height: 40px;
}

.gallery-up h4{
    list-style: 92px;
    font-size: 32px;
    text-align: center;
}
.gallery-up p{
    text-align: center;
    color: gray;
    font-size: 14px;
}
.gallery-down{
    width: 1200px;
    height: 650px;

    margin: 0 auto;
}
.gallery-down div{
    float: left;
    width: 360px;
    height: 290px;

    margin-top: 20px;
    margin-left: 20px;
}
.gallery-down div dl dt img{
    display: block;
    width: 100%;
    height: 240px;
}
.gallery-down div dl dd{
    display: block;

    height: 50px;
    background-color: #000;
    color: white;
    line-height: 50px;
    padding-left: 10px;
}
.gallery-down .gallery-down1{
    margin-left: 40px;
}
.gallery-down .gallery-down2{
    margin-left: 40px;
}
.gallery-down .gallery-down3{
    margin-top: 30px;
}
.gallery-down .gallery-down4{
    margin-left: 40px;
    margin-top: 30px;
}
.gallery-down .gallery-down5{
    margin-left: 40px;
    margin-top: 30px;
}
footer{
    margin-top: 20px;
    width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    background-color: #07cbc9;
}