Round avatar of user list and follow small blocks

Effect display

  First Realization of round head

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

among smallAvatar It is used to place the avatar module class attribute

width,height： Avatar pictures adapt to size

margin： Put the picture in the middle of the module

position: absolute ： Absolute position

boeder： Set the border thickness , Line type （ here solid It means solid line ）, Color

boeder-radius： Fillet degree

The second important point is the location of the avatar module , We need to set the relative position , Make the avatar relative to the position of the business card it is in , Otherwise, the drag progress bar will appear , Card scrolling , The embarrassing situation that the avatar position remains unchanged .

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