html+css实现好友列表，类似QQ群聊成员列表

html+css实现好友列表，类似QQ群聊成员列表。

1.最终效果图：

2.html部分：

<body id="users"><div class="tip"><span>群主</span></div><div class="item"><img class="face" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F30%2F20200530112650_4XXME.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&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="https://ss0.bdstatic.com/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="https://ss0.bdstatic.com/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="https://ss1.bdstatic.com/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="https://ss2.bdstatic.com/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="https://ss3.bdstatic.com/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="https://img2.baidu.com/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应用商店。
分享出来，希望能帮助到有需要的朋友！

html+css实现好友列表，类似QQ群聊成员列表相关推荐

php仿qq群聊,用Python写一个类似qq群聊的聊天室
用Python写一个聊天室功能 : 类似qq群聊 1. 进入聊天室需要输入姓名,姓名不能重复 2. 有人进入聊天室会向其他人发送通知 xxx 进入了聊天室 3. 一个人发消息,其他人会收到消息 xx ...
基于python实现类似qq群聊功能
这篇文章主要记录了自己学习python时学习到的使用python来实现类似qq群聊的功能,整个项目分为服务器端和客户端两个部分,具体的实现如下: 一.具体代码 1.服务器端(Server.py) im ...
Android 将Openfire中的MUC改造成类似QQ群一样的永久群
将Openfire中的MUC改造成类似QQ群一样的永久群转载于:https://www.cnblogs.com/zhujiabin/p/5814914.html
将Openfire中的MUC改造成类似QQ群一样的永久群
一.思路 1.新建立永久房间,同时保证房间中的成员存储到"ofmucmember"表当中. 2.新建一个用户登陆监听的插件,这个插件监听用户的登陆行为,同时在用户登陆时查询&quo ...
移动端点击加qq好友和加入qq群
移动端点击加qq好友和加入qq群写这篇文章主要是在做加qq好友和加入qq群功能时,在移动端ios上遇到了一些问题. 使用qq官方的api,在ios上加qq好友时会跳到app store,不会跳转到q ...
C++可视化-----QQ群聊系统
目录第二章概要设计第三章详细设计第四章测试报告第五章安装及使用第六章项目总结需求分析写这个是看着视频写出来的,项 ...
java模仿微信QQ群聊头像拼接，根据群聊内的用户头像拼接群聊头像，九宫格
java模仿微信QQ群聊头像拼接,根据群聊内的用户头像拼接群聊头像,九宫格效果图,这里只放了几张,1-9张图片都可以的,如果图片路径是从数据库查出来的相对路径,记得加上绝对路径否则会报找不到读取文件 ...
Python爬虫使用selenium爬取qq群的成员信息（全自动实现自动登陆）
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: python小爬虫 PS:如有需要Python学习资料的小伙伴可以 ...
Java项目模拟QQ群聊和私聊（网络编程+多线程）
[文末获取资源] 前几天学习了多线程,最近在学习网络编程,了解了UDP之后又学习了TCP,听一下大佬说,要看看你这两个东西掌握的怎么样,最好的办法就是写一个模拟QQ群聊和私聊,经过这几天的学习,以及不 ...

html+css实现好友列表，类似QQ群聊成员列表

html+css实现好友列表，类似QQ群聊成员列表。

html+css实现好友列表，类似QQ群聊成员列表相关推荐

最新文章

热门文章