用户列表 圆形头像并跟随小板块

效果展示

 首先 圆形头像的实现

.smallAvatar {
    width: 70px;
    height: 70px;
    margin: auto;
    position: absolute;
    border:3px solid #cadee2;
    border-radius: 50px;
}

其中smallAvatar是放置头像模块的class属性

width，height：头像图片适应大小

margin：使图片在模块中间

position: absolute ：绝对位置

boeder：设置边框粗细，线类型（此处solid是实线的意思），颜色

boeder-radius：圆角程度

其次有个重要的点就是头像模块的位置，我们要设置相对位置，要使头像相对于它所处的这张名片卡的位置，否则会出现拖动进度条，卡片滚动，头像位置不变的尴尬情况。

.personBroad1{
    width: 60px;
    height: 60px;
    position:relative; 《===！！！！
    top:5px;
    left:5px;
}