请老师检查优化代码

来源：4-8 自由编程

扶耳摩兔

2021-01-10 14:10:12

<!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/bb3.css">
</head>

<body>
    <div class="about">
        <div class="about-top">
            <h1>ABOUT</h1>
            <div class="about-division"></div>
            <p>Lorem Ipsum is simply dummytext of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text eversince the 1500s.</p>
        </div>
        <div class="about-body">
            <div class="about-main">
                <div class="main-left">
                    <h2>A WORD ABOUT US</h2>
                </div>
                <div class="main-middle">
                    <img src="../images/bb3.jpg" alt="">
                </div>
                <div class="main-right">
                    <div class="main-right-main">
                        <h2>70000</h2>
                        <div class="about-division"></div>
                        <p>Students</p>
                    </div>
                    <div class="main-right-main">
                        <h2>600</h2>
                        <div class="about-division"></div>
                        <p>Faculty</p>
                    </div>
                </div>
            </div>
            <div class="explore">
                <p>Praesent dignissim viverra est,sed bibendum ligula congue non. Sed ac nisl et felisgravida commodo?Suspendisse eget ullamcorper ipsum.Suspendisse diam amet.</p>
                <a href="">EXPLORE</a>
            </div>
        </div>
    </div>
</body>

</html>

* {
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.about {
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
}

.about .about-top h1 {
    text-align: center;
    font-style: 32px;
}

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

.about .about-top p {
    color: gray;
    font-style: 14px;
    width: 510px;
    text-align: center;
    margin: 0 auto;
}

.about .about-body {
    padding-top: 30px;
    height: 434px;
    position: relative;
}

.about .about-body .about-main {
    overflow: hidden;
}

.about .about-body .about-main .main-left {
    float: left;
    width: 270px;
}

.about .about-body .about-main .main-left h2 {
    font-size: 34px;
}

.about .about-body .about-main .main-middle {
    float: left;
    width: 650px;
    height: 434px;
}

.about .about-body .about-main .main-right {
    float: right;
    width: 258px;
}

.about .about-body .about-main .main-right .main-right-main {
    border: 1px solid #07cbc9;
    margin-bottom: 30px;
    padding: 40px;
}

.about .about-body .about-main .main-right .main-right-main h2 {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

.about .about-body .about-main .main-right .main-right-main p {
    text-align: center;
}

.about .about-body .explore {
    position: absolute;
    width: 300px;
    padding: 20px;
    font-size: 18px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid gray;
    left: 0;
    top: 50%;
    margin-top: -100px;
}

.about .about-body .explore a {
    display: block;
    width: 140px;
    height: 40px;
    background-color: black;
    color: white;
    text-align: center;
    line-height: 40px;
    margin: 20px 0;
}