当青训营遇上码上掘金
主题介绍
【我的名片】
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请围绕“我的名片”这个主题进行代码创作。
成果展示
设计思路
1. 名片结构（HTML）
整个名片分为两部分。上半部分usercard-head包含了背景图片，下半部分usercard-body又分为左右两部分，左侧usercard-body-left为用户的头像，右侧usercard-body-right包括用户的名称usercard-body-right-text-username、用户的状态信息usercard-body-right-text-reputation-item与两个交互按键usercard-body-right-button。基于此，我们可以设计出如下HTML结构。
<body>
<div class="usercard">
<div class="usercard-head"></div>
<div class="usercard-body">
<div class="usercard-body-left">
<img src="https://b0.bdstatic.com/ugc/M3ZzW1sL6y2voKG_gIfTDg4f86e8af936a95a51246cc3f0ad3fa5d.jpg@h_1280" alt="userhead">
</div>
<div class="usercard-body-right">
<div class="usercard-body-right-text">
<div class="usercard-body-right-text-username">
惊弓
<span>LV1</span>
</div>
<div class="usercard-body-right-text-reputation">
<span class="usercard-body-right-text-reputation-item">
<span>10068</span>
<span>贴贴</span>
</span>
<span class="usercard-body-right-text-reputation-item">
<span>3</span>
<span>关注</span>
</span>
<span class="usercard-body-right-text-reputation-item">
<span>1</span>
<span>粉丝</span>
</span>
</div>
</div>
</div>
</div>
<div class="usercard-body-right-button">
<button>发消息</button>
<button>贴贴该用户</button>
</div>
</div>
</body>
2. 名片样式（CSS）
- usercard：设计卡片的大小。将其内外边距清空，便于后续的样式设计。
- usercard-head：引入背景图片并设置展示效果。
- usercard-body-left：为用户头像设置大小，样式，浮动方式。
- usercard-body-right：调整布局，设计用户名称及用户信息的文字样式。
- usercard-body-right-button添加底端的两个交互按键，为其设计展示时的样式。使用hover属性和nth-child属性为其分别设计鼠标悬浮、点击时的动画效果。
代码实现
完整代码已放置码上掘金平台：
