当前位置 : 腾讯分分彩 > 代码 > html5 css3 > css3实例 > css3实现微信群头像布局代码

css3实现微信群头像布局代码

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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
极速赛车计划 极速赛车平台 极速赛车投注 腾讯分分彩 腾讯分分彩计划网 腾讯分分彩平台 腾讯分分彩平台 极速赛车投注 腾讯分分彩 腾讯分分彩平台