完成在线客服案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动回复</title>
<style>
*{margin:0;padding:0;}
.clearFix:after{content:"";display:block;height:0;visibility:hidden;both:clear;}
.fl{float:left;}
.fr{float:right;}
.box{width:360px;height:600px;background:#f5f5f5;margin:100px auto;padding-top:20px;}
.dialog{width:320px;height:520px;background:white;margin:0 auto;overflow:auto;}
.people{width:280px;padding-top:10px;margin-left:10px;}
.headPic{width:40px;height:40px;border-radius:20px;background:yellow;background:url(images/footlogo.png) no-repeat;background-size:40px 40px;}
.message{width:200px;padding:10px;background:#f5f5f5;border-radius:2px;}
.bottom{width:320px;height:80px;margin:0 auto;line-height:80px;}
.text{width:223px;height:40px;background:white;border:1px solid #f0f0f0;border-radius:2px;outline:none;padding-left:10px;}
.send{width:80px;height:40px;background:#ff6700;color:white;border:none;outline:none;}
</style>
</head>
<body>
<div class="box">
<div class="dialog">
</div>
<div class="bottom">
<input tpe="text" class="text">
<button type="submit" class="send">发送</button>
</div>
</div>
</body>
</html>