简易的个人信息卡片

一款简易的个人信息卡片，鼠标悬停在图片上面时会显示用户的签名信息，下面3个文字列表可以自由改成想要的其他内容，点击下面的“粉我”可以关注加粉。

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用font-awesome图标字体库，并引入页面的样式文件，代码如下：

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div容器的嵌套，结构并不复杂，代码如下：

<div class="container">
	<header>
		<div class="bio">
    	<img src="images/up.jpg" alt="background" class="bg">
			<div class="desc">
				<h3>@Richer</h3>
				<p>你所拥有的一切都是你吸引而来的。我们都活在过去的行为和想法造就的世界里。</p>
			</div>
		</div>
		<div class="avatarcontainer">
			<img src="images/photo.jpg" alt="avatar" class="avatar">
			<div class="hover">
				<div class="icon-twitter"></div>
			</div>
		</div>
	</header>
	<div class="content">
		<div class="data">
			<ul>
				<li>
					2,931
					<span>帖子</span>
				</li>
				<li>
					1,118
					<span>粉丝</span>
				</li>
				<li>
					531
					<span>关注</span>
				</li>
			</ul>
		</div>
		<div class="follow"> <div class="icon-twitter"></div> 粉我</div>
	</div>
</div>

页面的底部，需引入jQuery库和一个JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>