css3伪类匹配列表数目实现微信群多用户头像布局的技巧。不同用户头像数量不同的布局效果代码。

使用方法

1、head引入css文件

<!--封装好各种头像数量样式库-->
<link href="style.css"  rel="stylesheet"/>

2、body引入HTML代码

<!--1个头像布局-->
<ul>
    <li class="list"><img src="img/1.png" /></li>
</ul>

<!--2个头像布局-->
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
</ul>

<!--3个头像布局-->
<ul>
    <li class="list"><img src="img/1.png" /></li>
    <li class="list"><img src="img/3.png" /></li>
    <li class="list"><img src="img/2.png" /></li>
</ul>

资源出处：https://www.moyublog.com/codes/9463.html