​

/* About区域 */

.about {

    width: 1200px;

    margin: 0 auto;

    padding-top: 30px;

    overflow: hidden;

}

/* 标题和简短描述区域 */

.about .short h2 {

    font-size: 32px;

    text-align: center;

}

.about .short p {

    text-align: center;

    color: gray;

    font-size: 14px;

}

/* 详细描述区 */

.about .describe {

    width: 1201px;

    height: 464px;

    position: relative;

}

.about .describe .left {

    float: left;

}

.about .describe .left h3 {

    font-size: 32px;

    position: absolute;

    top: 32px;

    left: 0;

}

.about .describe .left .left-text {

    width: 300px;

    padding: 20px;

    font-size: 18px;

    border: 1px solid gray;

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

    position: absolute;

    top: 134px;

    z-index: 999;

}

.about .describe .left .explore {

    border: 1px solid #000;

    width: 140px;

    height: 40px;

    background-color: black;

    color: white;

    line-height: 40px;

    text-align: center;

    margin-top: 30px;

}

.about .describe img {

    float: left;

    margin-top: 30px;

    position: absolute;

    left: 269px;

    width: 650px;

    height: 435px;

}

.about .describe .right {

    float: right;

}

.about .describe .right .number {

    font-size: 28px;

}

.about .describe .right .box1 {

    border: 1px solid #07cbc9;

    width: 260px;

    padding: 40px 0;

    text-align: center;

    margin-top: 30px;

    margin-right: 1px;

}

.about .describe .right .box2 {

    border: 1px solid #07cbc9;

    width: 260px;

    padding: 40px 0;

    text-align: center;

    margin-top: 30px;

    margin-right: 1px;

}

html码：

    <!-- About区域 -->

    <div class="about">

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

        <div class="short">

            <h2>ABOUT</h2>

            <div class="dividing-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>

        <!-- 详细描述区 -->

        <div class="describe">

            <div class="left">

                <h3>

                    A WORD<br>ABOUT US

                </h3>

                <div class="left-text">

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

                    <p class="explore">EXPLORE</p>

                </div>

            </div>

            <div>

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

            </div>

            <div class="right">

                <div class="box1">

                    <p class="number">70000</p>

                    <div  class="dividing-line"></div>

                    <p>Sudents</p>

                </div>

                <div class="box2">

                    <p class="number">600</p>

                    <div class="dividing-line"></div>

                    <p>Faculty</p>

                </div>

            </div>

        </div>

    </div>