先上效果图

在这里插入图片描述

讲讲布局设计

聊天室大致分三块:

  • 左边导航
  • 右边聊天界面主界面
    在这里插入图片描述
    单独调整一下样式:
  • 外层friend-box先调整布局为flex,这样方便进行自适应布局,增加背景色为白色,设置边框圆角使得外观更加美观,使用绝对定位,并且设置top,left,transform: translateX(-50%) translateY(-50%);保证水平垂直居中。
  • 内层左边friend-aside设置固定宽度60px,增加右边框属性,区分左右聊天界面,设置布局为flex自适应,设置自适应flex-direction: column;从上到下,自适应排序。设置justify-content: space-between;设置元素等距。
  • 内层右边friend-bode设置flex填充右边剩余界面。
  .friend-box {
    display: flex;
    background-color: var(--white);
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 80vh;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
  }

  .friend-aside {
    width: 60px;
    border-right: 1px solid var(--maxLightGray);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .friend-bode {
    flex: 1;
    display: flex;
  }
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐