老师 帮忙检查下看还有无需要改进的地方

老师 帮忙检查下看还有无需要改进的地方

/*图文混排区域*/

.image-text{

width: 100%;

height: 760px;

overflow: hidden;

margin-top: 30px;

}

.image-text .image,.image-text .text{

width: 25%;

height: 380px;

float: left;

}

.image-text .image img{

width: 100%;

height: 380px;

}

.image-text .text{

background-color: #07CBC9;

height: 380px;

width: 25%;

}

.image-text .text div{

padding:20px;

}

.image-text .text .text1{

padding-bottom: 30px;

font-size: 24px;

color: white;

}

.image-text .text .text2{

padding-bottom: 20px;

font-size: 16px;

color: white;

}

.image-text .text .text3{

padding-bottom: 30px;

font-size: 14px;

color: gray;

}

.image-text .text .text4{

width: 138px;

height: 40px;

margin: 0 auto;

background-color: black;

color: white;

text-align: center;

line-height: 40px;

}

.image-text .image{

position: relative;

}

.image-text .image .before{

width: 0;

height: 0;

border: 20px solid transparent;

border-right-color: #07CBC9;

position: absolute;

top: 50%;

right: 0;

margin-top: -20px;

}

.image-text .image .after{

width: 0;

height: 0;

border: 20px solid transparent;

border-left-color: #07CBC9;

position: absolute;

top: 50%;

left: 0;

margin-top: -20px;

}


    <!-- 图文混排区域 -->

    <div class="image-text">

        <div class="image">

        <div class="before"></div>

            <img src="images/b1.jpg">

        </div>

        <div class="text">

        <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">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>

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

            </div>

        </div>

        <div class="image">

        <div class="before"></div>

            <img src="images/b2.jpg">

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">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>

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

            </div>

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">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>

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

            </div>

        </div>

        <div class="image">

        <div class="after"></div>

            <img src="images/b3.jpg">

        </div>

        <div class="text">

            <div>

            <p class="text1">Library</p>

            <p class="text2">Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>

            <p class="text3">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>

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

            </div>

        </div>

        <div class="image">

        <div class="after"></div>

            <img src="images/b4.jpg">

        </div>

    </div>


正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,代码实现的效果是正确的,也不需要再改进了很棒,继续加油,祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码