头像在左,右边显示两行文字(用表格实现)

直接上代码:

这里的图片本身是正方形,加了圆形头像效果


<html>
<head>
	<style type="text/css">
		.basicInfo-left{
	width: 80px;
	height: 80px;
}
.basicInfo-left img{
	width: 100%;
	height: 100%;
	border-radius: 50px;
}
	</style>
  
 
</head>
<body>
	
	<table border="" cellspacing="" cellpadding="" frame="void" rules="none">
		<!-- <tr><th>Header</th></tr> -->
		<tr>
			<td rowspan="2">
				<div class='basicInfo-left' >
					<img src='img/touxiang.jpg'>
				</div>
			</td>
			<td>name</td>
		</tr>
		<tr>
			<td><button type="button">添加好友</button></td>
		</tr>
	</table>
 

</body>
</html>

截图:
头像在左,右边显示两行文字(用表格实现)_第1张图片

你可能感兴趣的:(前端)