使用伪类来实现类似微信群聊的头像样式

最近看了一篇张鑫旭的博客,觉得人家的想法特别奇特,很值得学习。遂借鉴学习并记录一下,以备不时之需。

原文地址:伪类匹配列表数目实现微信群头像CSS布局的技巧

1. 简介

我们在使用微信群聊的时候,群聊的头像,是所在在群聊中的人的头像的一个组合。随着群聊成员数量的不同,群聊头像的样式也不一样。下面就是使用伪类来实现这样一个功能,让其样式随着数量的变化而变化。

2. 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
ul{
padding: 0; margin: 0;
list-style-type: none;
width: 240px; height: 240px;
background-color: #eee;
}
li {
background: url(https://s2.ax1x.com/2019/03/13/AkieC6.jpg);
background-size: 100%;
outline: 1px solid #fff;
}

button{
margin-top: 20px;
}

/* 1个 */
li:only-child {
height: 100%;
}
/* 2个 */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) + li{
width: 50%;
height: 50%;
}
li:first-child:nth-last-child(2) + li{
margin-left: auto;
}

/* 3个 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li{
width: 50%;
height: 50%;
float: left;
}
li:first-child:nth-last-child(3){
margin-left: 25%;
}

/* 4个 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 50%; height: 50%;
float: left;
}

/* 5个 */
li:first-child:nth-last-child(5){
width: 160px; height: 160px;
float: left;
}
li:first-child:nth-last-child(5) ~ li {
width: 80px; height: 80px;
float: left;
}


/* 6个 */
li:first-child:nth-last-child(6){
width: 160px; height: 160px;
float: left;
}
li:first-child:nth-last-child(6) ~ li {
width: 80px; height: 80px;
float: left;
}

/* 7个 */
li:first-child:nth-last-child(7){
width: 80px; height: 80px;
margin: auto;
}
li:first-child:nth-last-child(7) ~ li {
width: 80px; height: 80px;
float: left;
}

/* 8个 */
li:first-child:nth-last-child(8){
width: 80px; height: 80px;
margin-left: 40px;
float: left;
}
li:first-child:nth-last-child(8) ~ li {
width: 80px; height: 80px;
float: left;
}

/* 9个 */
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(9) ~ li {
width: 80px; height: 80px;
float: left;
}
</style>

3. 实现效果:

AkmG3n.gif

原文地址:伪类匹配列表数目实现微信群头像CSS布局的技巧

-------------本文结束感谢您的阅读-------------

本文标题:使用伪类来实现类似微信群聊的头像样式

文章作者:老米的世界

发布时间:2019年03月15日 - 00:00

最后更新:2019年09月05日 - 22:06

原始链接:http://mpfly.github.io/2019/03/15/使用伪类来实现类似微信群聊的头像样式/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

老米的世界 wechat
欢迎关注我的微信公众号!
坚持原创技术分享,您的支持将鼓励我继续创作!