html+css实现好友列表，类似QQ群聊成员列表。
1.最终效果图：
2.html部分：
<body id="users"><div class="tip"><span>群主</span></div><div class="item"><img class="face" src="/image_search/src=http%3A%2F%2Fc-%2Fuploads%2Fitem%2F20%2F30%2F2030112650_4XXME.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628654333&t=ccef3bc418154fea7edd5c5a5902766f"><div class="des"><div class="nickName"><span>共享达人</span></div><div class="signature"><span>共享一直都在</span></div></div></div><div class="tip"><span>管理员</span></div><div class="item"><img class="face" src="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2679948117,406693081&fm=26&gp=0.jpg"><div class="des"><div class="nickName"><span>未来</span></div><div class="signature"><span>共享一直都在</span></div></div><div class="sel none" onclick="sel(1)"><img id="sel1" src="../image/radio_unselect_radio.png"></div></div><div class="tip"><span>大神</span></div><div class="item"><img class="face" src="/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3027854183,3337834773&fm=26&gp=0.jpg"><div class="des"><div class="nickName"><span>游戏达人</span></div><div class="signature"><span>共享是一种游戏</span></div></div><div class="sel none" onclick="sel(2)"><img id="sel2" src="../image/radio_unselect_radio.png"></div></div><div class="tip"><span>学霸</span></div><div class="item"><img class="face" src="/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3158277031,3197404756&fm=26&gp=0.jpg"><div class="des"><div class="nickName"><span>外星人少</span></div><div class="signature"><span>高效共享</span></div></div><div class="sel none" onclick="sel(3)"><img id="sel3" src="../image/radio_unselect_radio.png"></div></div><div class="tip"><span>群众（3人）</span></div><div class="item"><img class="face" src="/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2745141664,3289119620&fm=26&gp=0.jpg"><div class="des"><div class="nickName"><span>共享小白</span></div><div class="signature"><span>小白的世界你不懂</span></div></div><div class="sel none" onclick="sel(4)"><img id="sel4" src="../image/radio_unselect_radio.png"></div></div><div class="item"><img class="face" src="/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=256130233,1829457086&fm=26&gp=0.jpg"><div class="des"><div class="nickName"><span>程序猿一枚</span></div><div class="signature"><span>请叫我大神</span></div></div><div class="sel none" onclick="sel(5)"><img id="sel5" src="../image/radio_unselect_radio.png"></div></div><div class="item"><img class="face" src="/it/u=2421505363,3507499484&fm=26&fmt=auto&gp=0.jpg"><div class="des"><div class="nickName"><span>努力向上</span></div><div class="signature"><span>我要拿第一</span></div></div><div class="sel none" onclick="sel(6)"><img id="sel6" src="../image/radio_unselect_radio.png"></div></div>
3.css实现
<style>html,body {height: 100%;width: 100%;background: #f0f0f0;font-size: 14px;}.tip{height: 20px;line-height: 20px;font-size: 14px;color: gray;padding-left: 10px;}.none{display: none;}.item{width: 100%;height: 60px;box-sizing: border-box;border-bottom: 1px solid #eee;background-color: #fff;display: flex;}.face{width: 44px;height: 44px;border-radius: 50%;position: absolute;left: 10px;margin-top: 8px;object-fit: cover;}.des{height: 60px;display: inline-block;margin-left: 65px;white-space : nowrap;text-overflow : ellipsis;overflow:hidden;flex: 1;}.nickName{/*height: 30px;*/margin-top: 10px;}.nickName span{height: 25px;line-height: 25px;font-size: 16px;white-space : nowrap;text-overflow : ellipsis;overflow:hidden;}.signature{/*height: 30px;*/margin-top: -5px;}.signature span{height: 20px;line-height: 20px;font-size: 12px;color:gray;white-space : nowrap;text-overflow : ellipsis;overflow:hidden;}.sel{width: 30px;height: 60px;display: inline-block;float: right;margin-right: 5px;}.sel img{width: 30px;height: 30px;margin-top: 15px;}</style>
这些都是本人在实际工作中的成果，各大应用商店可以搜索成品App《优享人》，包括IOS应用商店。 分享出来，希望能帮助到有需要的朋友！
