jquery添加div实现消息聊天框
(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )
本文实例为大家分享了jquery添加div实现消息聊天框的具体代码,供大家参考,具体内容如下
上代码
<html> <head> <style> * { margin: 0; padding: 0; } .border { margin-left: 300px; width: 900px; background-color: white; position: relative; border: 1px solid rgb(221, 221, 221); } .border .border-next { background-color: #dcad50; position: relative; height: 23px; line-height: 40px; display: flex; padding: 10px 60px 10px 80px; } .border-next .people { background-color: #dcad50; font-size: 20px; color: black; font-family: 楷体; margin-left: 300px; } .border .border-second { background-color: white; margin-left: 0px; width: 700px; height: 530px; flex: 1; flex-direction: column; overflow-y: auto; border-right: 1px solid rgb(221, 221, 221); border-bottom: 1px solid rgb(221, 221, 221); } .border .border-img { background-color: white; margin-left: 0px; width: 700px; height: 30px; border-right: 1px solid rgb(221, 221, 221); border-bottom: 1px solid rgb(221, 221, 221); } .border-bottom { display: flex; width: 700px; height: 120px; background-color: white; overflow: auto; font-size: 20px; border-style: solid; border-color: #FFFFFF; border-right: 1px solid rgb(221, 221, 221); } .button { display: flex; margin-left: 530px; } .button .shut { background-color: white; width: 70px; height: 30px; font-size: 20px; text-align: center; border: 1px solid rgb(221, 221, 221); } .button .send { background-color: white; margin-left: 15px; width: 70px; height: 30px; font-size: 20px; text-align: center; border: 1px solid rgb(221, 221, 221); background-color: #DBAC50; } .replyChat { display:flex; width: 150px; background: #12B7F5; border-radius: 5px; /* 圆角 */ position: relative; margin-left: 500px; align-content: center; margin-bottom: 30px; } .sendChat { display:flex; width: 150px; background: #E5E5E5; border-radius: 5px; /* 圆角 */ position: relative; margin-left: 50px; align-content: center; margin-bottom: 30px; border-color: white white white #E5E5E5; } .sendChat span { display: inline-block; margin-left: 10px; line-height: 35px; } .replyChat span { display: inline-block; margin-left: 10px; line-height: 35px; } .sendChat .arrows { position: absolute; top: 5px; left: -16px; /* 圆角的位置需要细心调试哦 */ width: 0; height: 0; font-size: 0; border: solid 8px; border-color: white #E5E5E5 white white; } .replyChat .arrow { position: absolute; top: 5px; right: -16px; /* 圆角的位置需要细心调试哦 */ width: 0; height: 0; font-size: 0; border: solid 8px; border-color: white white white #12B7F5; } .chatTouXiang { width: 50px; height: 50px; border-radius: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(img/tou.png); } .chatCnt{ } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>聊天助手</title> <script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:js实现聊天对话框