老师，帮我2-16的看一下效果对嘛，我觉得效果做出来不一样

来源：1-1 课程简介

拆以时记

2021-03-30 01:27:02

html：

</head>
<body>
    <!-- 网页图文混合区域 -->
    <div class="image-and-text">

        <!-- 图片1 -->
        <div class="images1 box1">
            <img src="images/b1.jpg" alt="图片1">
        </div>

        <!-- 文字2 -->
        <div class="text1 box2">
            <h3>Library</h3>
            <p class="par1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry
            </p>
            <p class="par2">
                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>
            <input type="submit" value="EXPLORE" class="button1">
        </div>

        <!-- 图片3 -->
        <div class="images2 box1">
            <img src="images/b2.jpg" alt="图片2">
        </div>

        <!-- 文字4 -->
        <div class="text2 box2">
            <h3>Library</h3>
            <p class="par1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry
            </p>
            <p class="par2">
                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>
            <input type="submit" value="EXPLORE" class="button1">
        </div>

        <!-- 文字5 -->
        <div class="text3 box2">
            <h3>Library</h3>
            <p class="par1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry
            </p>
            <p class="par2">
                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>
            <input type="submit" value="EXPLORE" class="button1">
        </div>

        <!-- 图片6 -->
        <div class="images3 box1">
            <img src="images/b3.jpg" alt="图片3">
        </div>

        <!-- 文字7 -->
        <div class="text4 box2">
            <h3>Library</h3>
            <p class="par1">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry
            </p>
            <p class="par2">
                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>
            <input type="submit" value="EXPLORE" class="button1">
        </div>

        <!-- 图片8 -->
        <div class="images4 box1">
            <img src="images/b4.jpg" alt="图片4">
        </div>

    </div>
</body>
</html>

css：

* {
    margin: 0;
    padding: 0;
}
.image-and-text {
    width: 100%;
    position: relative; 
}
.image-and-text img{
    display: block;
    width: 100%;
    height: 380px;
}
.image-and-text .box1 {
    width: 25%;
    height: 380px;
    float: left;
}
.image-and-text .box2 {
    width: 25%;
    height: 380px;
    float: left;
    background-color: #00978dc7;
}
.image-and-text .box2 h3 {
    color: white;
    font-size: 24px;
    padding-top: 20px;
    padding-left: 20px;
}
.image-and-text .box2 .par1 {
    margin-top: 30px;
    font-size: 16px;
    color: white;
    padding-left: 20px;
}
.image-and-text .box2 .par2 {
    margin-top: 20px;
    font-size: 14px;
    color: gray;
    padding-left: 20px;
}
.image-and-text .box2 .button1 {
    display: block;
    width: 138px;
    height: 40px;
    border: none;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
}
.image-and-text .text1::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right-color: #00978dc7;
    position: absolute;
    top: 140px;
    left: 258px;
}
.image-and-text .text2::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-right-color: #00978dc7;
    position: absolute;
    top: 140px;
    left: 932px;
}
.image-and-text .text3::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-left-color: #00978dc7;
    position: absolute;
    top: 520px;
    left: 337px;
}
.image-and-text .text4::before {
    content: "";
    width: 0;
    height: 0;
    border: 40px solid transparent;
    border-left-color: #00978dc7;
    position: absolute;
    top: 520px;
    left: 1012px;
}