html+css实现好友列表，类似QQ群聊成员列表 |
您所在的位置：网站首页 › qq怎么分组好友列表 › html+css实现好友列表，类似QQ群聊成员列表 |
html+css实现好友列表，类似QQ群聊成员列表
|
html+css实现好友列表，类似QQ群聊成员列表。
1.最终效果图： 3.css实现 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; }这些都是本人在实际工作中的成果，各大应用商店可以搜索成品App《优享人》，包括IOS应用商店。 分享出来，希望能帮助到有需要的朋友！ |
2.html部分：【本文地址】
今日新闻 |
推荐新闻 |