技巧总结
关于模仿此类静态页面，关键在于做好模块的划分，CSS部分最好按照顺序，从上至下、从左至右开始编写各个模块的
样式。条理清晰对于代码逻辑的编写很有帮助。另外各个div部分的类名最好做到见名知义，内部的div名称包含外部div名称，这样后续看代码也可以短时间内弄清楚各个部分的逻辑关联。
具体效果
具体实现包含静态样式，鼠标悬浮头像自动变大，按钮悬浮变色等动态样式。
全部代码
- 详细代码(bilibili.html包含css)如下所示：
<!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>UserCard</title>
<style>
.usercard {
width: 366px;
height: 281px;
box-sizing: border-box;
border-radius: 5px;
/* background-color: lightblue; */
margin: auto;
box-shadow: 1px 2px 10px lightgray;
}
.usercard-head {
width: 366px;
height: 85px;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
background-image: url("images/bg2.png");
background-size: cover;
}
.usercard-content {
/* background-color: lightgreen; */
width: 366px;
height: 196px;
/* padding: 12px 20px 16px 0px; */
box-sizing: border-box;
/* float: left; */
}
.usercard-content-left {
margin: 12px 0 0;
/* background-color: lightcoral; */
width: 70px;
height: 184px;
box-sizing: border-box;
padding-left: 10px;
float: left
}
.usercard-content-left > img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.usercard-content-left > img:hover {
transform: scale(1.2);
transition: 600ms;
cursor: pointer;
}
.usercard-content-right {
/* background-color: lightpink; */
width: 276px;
height: 196px;
box-sizing: border-box;
display: inline-block;
padding: 12px 20px 16px 0px;
}
.usercard-content-right-userinfo {
box-sizing: border-box;
width: 276px;
height: 30px;
margin: 0 0 10px;
}
.usercard-content-right-userinfo span {
border-radius: 3px;
margin-right: 6px;
}
.usercard-content-right-reputation {
width: 276px;
height: 18px;
line-height: 18px;
}
.usercard-content-right-reputation-info-num {
font-size: 12px;
color: #18191c;
line-height: 18px;
}
.usercard-content-right-reputation-info-text {
font-size: 12px;
color: #9499a0;
margin-right: 10px;
line-height: 18px;
}
.usercard-content-right-description {
width: 276px;
height: 62px;
box-sizing: border-box;
color: #9499A0;
font-size: 12px;
padding: 8px 0px 0px;
}
.usercard-content-right-bottom {
width: 276px;
height: 32px;
box-sizing: border-box;
margin: 16px 0 0;
}
.usercard-content-right-bottom-button1 {
width: 100px;
height: 30px;
background-color: #00AEEC;
color: #FFFFFF;
font-size: 14px;
margin-right: 8px;
float: left;
font-weight: bold;
border-radius: 5px;
text-align: center;
line-height: 30px;
}
.usercard-content-right-bottom-button2 {
width: 100px;
height: 30px;
/* color: #00AEEC; */
color: #61666D;
font-size: 14px;
font-weight: bold;
background-color: aliceblue;
float: left;
border-radius: 5px;
border: solid 1px;
text-align: center;
line-height: 30px;
}
.usercard-content-right-bottom-button1:hover {
cursor: pointer;
}
.usercard-content-right-bottom-button2:hover {
cursor: pointer;
color: #00AEEC;
transition: 700ms;
}
</style>
</head>
<body>
<div class="usercard">
<div class="usercard-head"></div>
<div class="usercard-content">
<div class="usercard-content-left">
<img src="images/avt1.jpg" alt="用户头像">
</div>
<div class="usercard-content-right">
<div class="usercard-content-right-userinfo">
<span style="color: #fb7299; font-size: 16px;">unProcrastinator</span>
<span style="color: #f04c49; font-size: 12px;">LV6</span>
<span style="background-color: #fb7299; color: #FFFFFF; font-size: 12px;padding: 0.2em;">年度大会员</span>
</div>
<div class="usercard-content-right-reputation">
<span class="usercard-content-right-reputation-info">
<span class="usercard-content-right-reputation-info-num">27</span>
<span class="usercard-content-right-reputation-info-text">关注</span>
</span>
<span>
<span class="usercard-content-right-reputation-info-num">8.8万</span>
<span class="usercard-content-right-reputation-info-text">粉丝</span>
</span>
<span>
<span class="usercard-content-right-reputation-info-num">12.5万</span>
<span class="usercard-content-right-reputation-info-text">获赞</span>
</span>
</div>
<div class="usercard-content-right-description">
我十七岁，这个年纪里整个世界都是我的，不需要犹豫也用不着权衡，我无坚不摧，也无所不能。
</div>
<div class="usercard-content-right-bottom">
<div class="usercard-content-right-bottom-button1">+关注</div>
<div class="usercard-content-right-bottom-button2">发消息</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图如图所示:
