效果展示
首先 圆形头像的实现
.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;
}