HTML聊天自动回复窗源码,jquery网站聊天窗代码(原创)

* {

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;

}