老师请帮忙检查一下代码的正确性和规范性，谢谢你。

首页课程实战体系课手记专栏慕课教程

来源：4-8 自由编程

日拱一卒_

2020-11-09 15:17:12

具体遇到的问题

报错信息的截图

尝试过的解决思路和结果

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about4_8</title>
    <link rel="stylesheet" href="css/about4_8.css">
</head>

<body>

    <div class="header">
        <p class="header-p">ABOUT</p>
        <div class="outline"></div>
        <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy test ever since the 1500s.</span>
    </div>
    <div class="content">
        <img src="images/bb3.jpg" alt="">
        <div class="leftBox">
            <p class="leftBox-p">
                A WORD
                <br> ABOUT US
            </p>
            <div class="leftBox-text">
                <span>Praesent dignissim viverra est, sed bibendum ligula congue non.Sed ac nisl et felis gravida commodo? Suspendisse eget ullamcorper ipsum. Suspendisse diam amet.
                    </span>
                <button>EXPLORE</button>
            </div>
        </div>
        <div class="rightBox">
            <div class="students">
                <p>70000</p>
                <div class="outline"></div>
                <span>Students</span>
            </div>
            <div class="faculty">
                <p>600</p>
                <div class="outline"></div>
                <span>Faculty</span>
            </div>
        </div>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
}

.header .header-p {
    text-align: center;
    margin-top: 30px;
    font-size: 32px;
    font-weight: bold;
}

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

.header span {
    display: block;
    text-align: center;
    color: gray;
    font-size: 14px;
}

.content {
    width: 1200px;
    height: 464px;
    margin: 0 auto;
    position: relative;
}

.content img {
    width: 650px;
    height: 435px;
    position: absolute;
    left: 50%;
    margin-left: -325px;
    margin-top: 30px;
}

.content .leftBox {
    float: left;
    position: absolute;
}

.content .leftBox .leftBox-p {
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    margin: 30px 0;
}

.content .leftBox .leftBox-text {
    float: left;
    width: 300px;
    padding: 20px;
    font-size: 18px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, .5);
}

.content .leftBox .leftBox-text span {
    display: block;
    width: 300px;
    margin: 20px;
}

.content .leftBox .leftBox-text button {
    width: 140px;
    height: 40px;
    margin-bottom: 20px;
    margin-left: 20px;
    background: black;
    color: white;
}

.content .rightBox {
    position: absolute;
    right: 0;
    margin-top: 30px;
}

.content .rightBox .students {
    width: 260px;
    padding: 40px 0;
    border: 1px solid #07cbc9;
    margin-bottom: 30px;
}

.content .rightBox .faculty {
    width: 260px;
    padding: 40px 0;
    border: 1px solid #07cbc9;
    margin-bottom: 30px;
}

.content .rightBox p {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.rightBox span {
    display: block;
    font-size: 18px;
    text-align: center;
}

写回答

1回答