分享一个头像框

最新推荐文章于 2025-08-12 19:13:51 发布

原创最新推荐文章于 2025-08-12 19:13:51 发布 · 300 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

效果

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
	
	.comment-list{
	    /* 调整大小 */
		width: 800px;
		margin: 20px auto;

	}
	.comment-list .comment-info{
		
		margin-bottom: 20px;

	}
	.comment-list .comment-info div{
		width: 10%;
		float:left;
		
		margin-right: 20px;
	}
	.comment-list .comment-info div img{
		width: 100%;
		border-radius: 50%;
		padding: 5px;
		
	}
	
</style>
</head>
<body>

	<div class="comment-list">
		<div class="comment-info">		    
			<div><img class="thumbnail" src="./images/0.png">
			
			</div>
		</div>
	</div>

</body>
</html>

效果

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
	
	.comment-list{
	    /* 调整大小 */
		width: 300px;
		margin: 20px auto;

	}
	.comment-list .comment-info{
		
		margin-bottom: 20px;

	}
	.comment-list .comment-info div{
		width: 10%;
		float:left;
		
		margin-right: 20px;
	}
	.comment-list .comment-info div img{
		width: 100%;
		border-radius: 50%;
		padding: 5px;
		
	}
	
</style>
</head>
<body>

	<div class="comment-list">
		<div class="comment-info">		    
			<div><img class="thumbnail" src="./images/0.png">
			
			</div>
		</div>
	</div>

</body>
</html>