分享一个头像框

最新推荐文章于 2024-08-04 17:37:01 发布

什么都不懂的菜鸟玩家

最新推荐文章于 2024-08-04 17:37:01 发布

阅读量236

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43653670/article/details/115435431

版权

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

效果

代码

<!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>