主要用到的是flex布局,还有css3的伪类选择器。多复习巩固啊。。。。
<ul class="center-ads-list">
<li>
<a href="/">
<img alt="" src="https://res.vmallres.com/pimages//pages/picImages/93724597641619542739.png">
</a>
</li>
</ul>
/*父盒子*/
.center-ads-list{
display: flex;
justify-content: flex-start;
align-items: center;
margin: 13px 0px;
width: 100%;
flex-flow: row wrap; /*按照行排列,一行排不下换行。flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/
}
.center-ads-list>li{
flex: 0.25;/*一行排列4个*/
height: 200px;
border-radius: 20px;
margin-right: 10px;
margin-bottom: 10px;
}
/* 在所有的li中,所有是索引是4(从1开始)的倍数的li元素, 去掉margin-right */
.center-ads-list>li:nth-of-type(4n+0){
margin-right: 0px;
}
.center-ads-list>li a{
display: block;
height: 200px;
}
.center-ads-list>li a img{
height: 200px;
border-radius: 10px;
}
下面是实现效果图: