简易聊天室

<style>
body{margin:0px;}
li{list-style:none;}
.enter{
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.name{
	padding-right:20px;
}		
.list{
	border:1px solid;
	width:600px;
	height:400px;
	border-bottom:0px;
}
.send{
	display:flex;
	justify-content:space-between;
	border:1px solid;
	width:600px;
	height:200px;
}
.content{
	width:100%;
	height:100%;
}
#send{
	display:flex;
	width:50px;
	align-items:flex-end;
	margin-right:-5px;
}	
</style>
<div class=enter>
	<li class=name>昵称:<input /> </li>
	<li><button>进入聊天室</button></li>
</div>
<script src=jq.js></script>
<script>
$('button').click(function(){
	$('.enter').html('<div><div class=list></div><div class=send><div class=content contenteditable=true></div><div id=send><button>发送</button></div></div></div>')
	$('#send').click(()=>$('.list').html($('.content').html()))
})
</script>