本文最后更新于 562 天前，其中的信息可能已经有所发展或是发生改变。
实现效果
](https://img.xlonglong.cn/img/.png)
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./practice.css">
</head>
<body>
<div class="usercard">
<div class="back_card">
</div>
<div class="card-content">
<div class="left">
<div class="user-card-image"></div>
</div>
<div class="right">
<div class="right-text">
<div class="user-name"><a class="name" href="#">Longlong</a><a class="grade" href="#">Lv4</a>
<span class="huiyuan">年度大会员</span>
</div>
<div class="user-social-info">
<a href="#" style="text-decoration: none;"> <span class="number">105</span> <span
class="type">关注</span></a>
<a href="#" style="text-decoration: none;"> <span class=" number">28</span> <span
class="type">粉丝</span></a>
<a href="#" style="text-decoration: none;"> <span class=" number">190</span> <span
class="type">获赞</span></a>
</div>
</div>
<div class="right-personality">诗酒趁年华。</div>
<div class="right-card-btn">
<button><span>+关注</span> </button> <button><span>发消息</span></button>
</div>
</div>
</div>
</div>
</body>
</html>css：
.usercard {
width: 366px;
height: 220px;
margin: 0 auto;
box-shadow: 2px 2px 5px lightgrey;
border-radius: 5px;
/* 单独设置边框颜色是不起作用的,必须先设置border-style */
/* border-style: dotted;
border-color: aqua; */
}
.back_card {
background-image: url(./屏幕截图\ 2023-02-13\ 101028.png);
background-size: cover;
width: 366px;
height: 85px;
}
.left {
width: 20%;
height: 100%;
float: left;
}
.right {
width: 80%;
height: 100%;
float: right;
}
.user-card-image {
background-image: url(/学习笔记/wallhaven-weeqzx.jpg);
border-radius: 50%;
background-size: cover;
width: 48px;
height: 48px;
margin-top: 15px;
margin-left: 20px;
}
.card-content {
width: 366px;
height: 133.78px;
}
.user-name {
margin: 15px 0px 10px;
width: 100%;
height: 100%;
}
.name {
color: #18191c;
text-decoration: none;
margin: 0px, 5px, 0px, 0px;
}
.grade {
text-decoration: none;
font-size: 5px;
margin: 0px 0px 0px 5px;
color: #FEBB8B;
/* fill-rule: evenodd;
clip-rule: evenodd;
fill: #FEBB8B; */
font-style: italic;
}
.huiyuan {
background-color: #FB7299;
color: white;
font-size: 10px;
width: 64px;
height: 18px;
padding: 1px 4px;
margin: 0px 0px 0px 9px;
border-radius: 2px;
}
.user-social-info {
width: 100%;
height: 100%;
}
.right-personality {
width: 100%;
height: 12px;
color: #9499A0;
font-size: 12px;
padding: 8px 0px 0px;
/* margin: 0px 20px 0px 0px; */
position: relative;
bottom: 3px;
}
.number {
color: #18191c;
width: 20.53px;
height: 16px;
font-size: small;
margin: 0px 0px 5px;
}
.type {
color: #9499A0;
width: 24px;
height: 16px;
margin: 0px 0px 0px 3px;
font-size: small;
margin: 0px 0px 5px;
}
.right-card-btn {
margin: 16px 0px 0px;
width: 276px;
height: 31px;
position: relative;
bottom: 10px;
}
.right-card-btn button {
background-color: #00AEEC;
margin: 0px 8px 0px 0px;
border-radius: 3px;
color: white;
text-align: center;
height: 30px;
width: 100px;
/* box-shadow: 2px 2px 5px lightblue; */
border-color: #9499A0;
/* box-shadow: 2px 2px 5px lightgrey; */
border-width: 1px;
font-size: 14px;
}
button:nth-child(2) {
background-color: white;
color: #61666D;
}
button:hover:nth-child(2) {
color: #00AEEC;
border-color: #00AEEC;
/* border-width: 2px; */
}