案例：

图片资源：

 

参考代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.wai{
		width:150px;
		margin: 50px auto;
	}
	p{ 
		font-weight: 500;
		width：150px;
		height:30px;
		line-height: 30px;/*当行高和边距相同时，文字水平居中	*/
		border: 2px solid #999;/*	<p>标签的边框及样式	*/
		margin: 1px;	/*	每个<p>标签设置外边距	*/
		padding-left: 10px;/*	<p>左内边距为10px	*/
		
	}
</style>
<body>
	<div class="wai">
		<div>
			<img src="../user.jpg">
		</div>
		<div>
			<p>用户姓名：</p>
			<p>学习进度：</p>
			<p>兴趣爱好：</p>
			<p>参与的群：</p>
		</div>
	</div>
</body>
</html>

更多推荐

HTML5网页设计基础——用户中心