老师您看对吗？

来源：4-8 自由编程

慕田峪6072870

2020-11-25 16:18:32

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.main .top {
    margin: 0 auto;
    width: 500px;
    height: 100px;
}

.main .top h3 {
    font-size: 32px;
    text-align: center;
    margin-top: 30px;
}

.main .top .line {
    width: 60px;
    height: 3px;
    background-color: #07cdc9;
    margin: 0 auto;
}

.main .top p {
    text-align: center;
    color: gray;
    font-size: 14px;
}

.main .main1 {
    position: absolute;
    width: 1202px;
    height: 466px;
    left: 50%;
    margin-left: -601px;
    /* border: 1px solid #000; */
}

.main .main1 .imges {
    width: 650px;
    height: 435px;
    position: absolute;
    left: 50%;
    margin-left: -300px;
    margin-top: 30px
}

.main .main1 .imges img {
    width: 650px;
    height: 435px;
}

.main .main1 h4 {
    font-size: 25px;
    margin-top: 30px;
    left: 0;
    font-weight: bold;
}

.main .main1 h5 {
    font-size: 25px;
    margin-top: 30px;
    left: 0;
    font-weight: bold;
}

.main .main1 .pic1 {
    width: 300px;
    height: 200px;
    padding: 20px;
    font-size: 18px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -100px;
}

.main .main1 .pic1 span {
    width: 140px;
    height: 40px;
    display: block;
    background-color: black;
    color: white;
    line-height: 40px;
    text-align: center;
    margin-top: 20px;
}

.main .main1 .pic2 {
    width: 180px;
    height: 100px;
    padding: 30px;
    border: 1px solid #07cdc9;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;
    margin-top: 30px;
}

.main .main1 .pic2 span {
    display: block;
    text-align: center;
    top: 40px;
    font-size: 28px;
    font-weight: bold;
}

.main .main1 .pic2 .line1 {
    width: 60px;
    height: 3px;
    background-color: #07cdc9;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    margin-top: 15px;
}

.main .main1 .pic2 p {
    display: block;
    text-align: center;
    margin-top: 40px;
}

.main .main1 .pic3 {
    width: 180px;
    height: 100px;
    padding: 30px;
    border: 1px solid #07cdc9;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;
    margin-top: 228px;
}

.main .main1 .pic3 span {
    display: block;
    text-align: center;
    top: 40px;
    font-size: 28px;
    font-weight: bold;
}

.main .main1 .pic3 .line2 {
    width: 60px;
    height: 3px;
    background-color: #07cdc9;
    position: absolute;
    left: 50%;
    margin-left: -30px;
    margin-top: 15px;
}

.main .main1 .pic3 p {
    display: block;
    text-align: center;
    margin-top: 40px;
}

</style>
</head>
<body>
<div class="main">
        <div class="top">
            <h3>ABOUT</h3>
            <div class="line"></div>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        </div>
        <div class="main1">
            <div class="imges"><img src="./imags/bb3(1).jpg"></div>
            <div class="pic3">
                <span>600</span>
                <div class="line2"></div>
                <p>Faculty</p>
            </div>
            <div class="pic2">
                <span>70000</span>
                <div class="line1"></div>
                <p>Students</p>
            </div>
            <h4>A WORD</h4>
            <h5>ABOUT US</h5>
            <div class="pic1">
                <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><span>EXPLORE</span>
            </div>
        </div>
    </div>
</body>
</html>