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应用商店。
分享出来,希望能帮助到有需要的朋友!