* { margin:0; padding:0; box-sizing:border-box; } .talk-window { width:450px; height:400px; background-color:whitesmoke; box-shadow:0 0 10px #ccc; position:fixed; bottom:10px; right:30px; } .tw-title { text-align:center; line-height:40px; font-size:14px; font-weight:bold; color:#666; position:relative; } .close-tw-window { display:inline-block; width:20px; height:20px; position:absolute; right:10px; top:10px; line-height:20px; font-size:24px; cursor:pointer; color:#666; } .close-tw-window:hover { color:#333; } .tw-content { padding:0 10px 150px; width:100%; height:calc(100% - 40px); } .talk-list-div { width:100%; height:100%; border:5px double #ccc; padding:5px 10px; overflow:auto; } .msg-div { overflow:hidden; margin:20px 0; } .other-msg-div { float:left; max-width:260px; position:relative; padding-left:35px; } .header-img-div { width:30px; height:30px; overflow:hidden; border-radius:30px; } .other-msg-div .header-img-div { position:absolute; left:0; top:5px; } .my-msg-div { float:right; max-width:260px; position:relative; padding-right:35px; } .my-msg-div .header-img-div { position:absolute; right:0; top:5px; } .header-img-div img { width:100%; height:100%; } .msg-content { padding:10px; border-radius:5px; } .other-msg-div .msg-content { background-color:#f4ecdd; color:#333; } .my-msg-div .msg-content { background-color:#403dff; color:white; } .talk-operate-div { width:100%; height:150px; position:absolute; bottom:0; left:0; padding:5px 10px 0 10px; } .talk-operate-btn-list { width:100%; height:30px; line-height:30px; background-color:white; margin-bottom:5px; font-size:12px; } .talk-operate-textarea { height:75px; } .talk-operate-textarea textarea { width:100%; max-height:70px; min-height:70px; height:70px; padding:5px 10px; background-color:white; outline:none; max-width:100%; min-width:100%; resize:none; } .send-btn { text-align:right; } .send-btn span { display:inline-block; padding:0 20px; background-color:#403dff; color:white; font-size:14px; line-height:30px; cursor:pointer; border-radius:5px; }
更新时间:2020-08-27 00:26:05
提供jq编写网站聊天窗demo,可扩展emoji表情包发送功能