老师 帮忙检查下看还有无需要改进的地方
/*图文混排区域*/
.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积分~
来为老师/同学的回答评分吧