关键词: 美团登录界面: 头像 昵称 hover

一 . 如何把图片做成圆形头像
border-radius: 50%;
二 . 对昵称的处理
1. 首先先用 overflow:hidden ,表示超出部分则隐藏。如果没超出也可以设置。
2 .white-space: nowrap; //段落文本不换行。
3. 此时对其设置规定的宽度width ,昵称会省略显示不出来的文字,
最后用text-overflow: ellipsis;属性来设置省略的文字用省略号来替代。

三 . hover

.btn:hover{
background-color: #dddddd;
}
备注:此文章根据实例总结而来,访问更多请点我的github
网友评论