html+css+js实现简易聊天样式_聊天室样式-优快云博客

本文介绍了一种基于HTML和CSS的简易聊天室样式设计方法，通过使用浮动布局和圆角背景实现了不同消息的视觉区分，适用于快速搭建聊天界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1、简述
2、效果图
3、核心代码

1、简述

因为项目需求，就做了一个简易的聊天室。

2、效果图

在这里插入图片描述

3、核心代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>demo聊天样式</title>

	<style type="text/css">
	body {
		font-size: 14px;
		background-color: #fff;
	}

	.left-avator{
		border-radius: 50%;
		width: 6%;
		float: left;
		margin-top: 5%;
	}
	
	#chatMsgs{
		position: relative;
	}
	
	.s1{
		position: relative;
		width: 100%;
		height: 30%;
		overflow: hidden;
	}
	
	.m1{
		float: left;
		margin-top: 7%;
		margin-left: 3%;
	}
	
		
	.f1{
		margin: 0 auto;
		display: inline-block;
		height: 30px;
		background-color: gray;
		color: white;
		padding-top: 2px;
		padding-left: 14px;
		padding-right: 14px;
		border-radius: 100px;
		margin-top: -3px;
		
	}
	
	.m1{
		border-bottom-left-radius: 0px;
	}
	
	.m2{
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	}
	
	.m3{
		border-top-left-radius: 0px;
	}

	
	.content{
		float: left;
	}
	

	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">

  var chatMessages = [
  	{"face":"face1.png", "msg": [{"content":"双十一你们都买啥"}]},
  	{"face":"face2.png", "msg": [{"content":"不买"}, {"content":"剁手了！"}]},
  	{"face":"face3.png", "msg": [{"content":"我想想"}, {"content":"我想买个耳麦"}, {"content":"可惜太贵了"}]}
  ];

  function chat() {
  	
	var html='';
  	$.each(chatMessages,function(index,item){
		html+='<div class="s1">'+
			'<div><img class="left-avator"  src="'+item.face+'"></img></div>';
			html+='<div class="m1">';
			$.each(item.msg,function(index,msg){
				if(item.msg.length>1){
					if(index===0){
						html+='<div class="messageContentDiv "><div class="f1 m1"><div class="content">'+msg.content+'</div></div></div>';
					} else if(index===item.msg.length-1){
						html+='<div class="messageContentDiv "><div class="f1 m3"><div class="content">'+msg.content+'</div></div></div>';
					} else {
					html+='<div class="messageContentDiv "><div class="f1 m2"><div class="content">'+msg.content+'</div></div></div>';
					}
				} else {
					html+='<div class="messageContentDiv"><div class="f1"><div class="content">'+msg.content+'</div class="content"></div></div>';
				}
			});
			html+='</div>';
		html+='</div>';
		
	});
	$('#chatMsgs').html(html);
  }
  
 
  </script>

</head>

<body>

    
	<div>
    
        
        <div id="chatMsgs" style="min-height:400px"> 
		</div>
        
	</div>

  <script type="text/javascript">
//   开始渲染
  chat();
  </script>
</body>
</html>