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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值