初衷与起因
听了y总的《Web应用课》，心血来潮，跟着学了一遍怎么实现b站的用户名片样式
今天实习没任务，给自己的摸鱼生活找点乐子
实现目标
随机点开b站一个视频，在评论区，鼠标移动到用户头像，可以展示用户的一个名片，如下：
我们今天就要一步步用css+html来实现这个名片效果
基本方法步骤
首先，根据目标名片的样式，自行设计基本的结构，摸清楚就行，然后在html文件的body区域中把基本结构写出来，其余的细节后面慢慢实现。接着，由外向内的一步步实现细节，去网页“检查”，利用QQ截图工具进行取色，适当百度。反复对照自己实现的网页名片和实际目标的相似度与效果，不断润色提高代码
bilibili.css文件：
.user-card {width: 366px;height: 257px;box-shadow: 2px 2px 5px lightgray;border-radius: 5px;}.user-card-head {background-image: url('/static/images/mountain.jpg');background-size: cover;width: 100%;height: 85px;}.user-card-body {width: 100%;height: calc(100% - 85px);box-sizing: border-box;padding-top: 12px;}.user-card-body-left {width: 70px;height: 100%;float: left;text-align: center;}.user-card-body-left>img {width: 48px;height: 48px;border-radius: 50%;}.user-card-body-right {width: calc(100% - 70px);height: 100%;float: left;}.user-card-body-right-txt {width: 100%;height: 60%;}.user-card-body-right-txt-username {padding-left: 10px;font-size: 16px;color: #18191C;font-weight: bold;}.user-card-body-right-txt-username>span {font-size: 12px;color: rgb(255, 108, 0);font-style: italic;}.user-card-body-right-txt-reputation {padding-left: 10px;padding-top: 12px;box-sizing: border-box;}.user-card-body-right-txt-reputation-item {margin-right: 20px;}.user-card-body-right-txt-reputation-item>span:nth-child(1) {font-size: 12px;color: #222222;font-weight: 500;}.user-card-body-right-txt-reputation-item>span:nth-child(2) {font-size: 12px;color: #9499A0;}.user-card-body-right-button {padding-left: 10px;}.user-card-body-right-button>button {width: 100px;height: 30px;border: none;border-radius: 5px;margin-right: 5px;cursor: pointer;}.user-card-body-right-button>button:nth-child(1) {background-color: #00AEEC;color: white;}.user-card-body-right-button>button:nth-child(1):hover {background-color: #00B5E5;transition: 1000ms;}.user-card-body-right-button>button:nth-child(2) {background-color: white;border: #61666D solid 1px;color: #61666D;}.user-card-body-right-button>button:nth-child(2):hover {border-color: #00AEEC;color: #00AEEC;transition: 1000ms;}
about.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="/static/css/bilibili.css"></head><body><div class="user-card"><div class="user-card-head"></div><div class="user-card-body"><div class="user-card-body-left"><img src="/media/user/profile/photo/108802_lg_1cc052d8a6.jpg" alt=""></div><div class="user-card-body-right"><div class="user-card-body-right-txt"><div class="user-card-body-right-txt-username">Alkali<span>LV5</span></div><div class="user-card-body-right-txt-reputation"><span class="user-card-body-right-txt-reputation-item"><span>58</span><span>关注</span></span><span class="user-card-body-right-txt-reputation-item"><span>3</span><span>粉丝</span></span><span class="user-card-body-right-txt-reputation-item"><span>15</span><span>赞</span></span></div></div><div class="user-card-body-right-button"><button>+关注</button><button>发消息</button></div></div></div></div></body></html>
