前端emojs_超全版-模拟微信网页版聊天界面(html+CSS+js)

超全版-模拟微信网页版聊天界面(html+CSS+js)

最近一个小订单要做微信网页版的商城客服中心，做了个还不错的界面，稍稍模拟了微信那种样式 不过也加了自己的想法~先上效果图：

废话不多说 上代码！！！

1.页面引入基本布局

基础版

json版

2.引入相关样式

/*基础样式*/

.topContainer{

border-radius: 5px;

border: 2px solid #ccc;

height: 500px;

padding: 10px;

}

#leftDemo, #rightDemo{

width:400px;

display: inline-block;

margin: 30px auto 30px 200px;

}

#rightDemo{

float: right;

margin: 30px 200px 0 0;

}

.outContainer{

position: relative;

}

.outContainer:not(:first-child){

margin-top: 20px;

}

/* 消息框通用样式*/

.messInRight{

text-align: right;

}

.left, .right, .faceImg{

display: inline-block;

}

.left{

width: 32px;

top: 0;

}

.right{

margin-left: 15px;

}

.faceImg{

position: absolute;

top: 0;

}

.faceImgInRight{

right: -5px;

}

.messContent{

color: #fff;

font-size: 14px;

}

.contentDetail{

display: inline-block;

background-color: #00FF7F;

padding: 5px 12px;

border-radius: 15px;

}

.contentDetail:not(:first-child){

margin-top: 2px;

}

.contentDetail:first-child{