style.css

*{ margin: 0;padding: 0;box-sizing: border-box; }
li{ list-style: none; }
.container{ width: 800px;height: 600px;border: 1px solid #d2d2d2;margin: 60px auto;border-radius: 2px; }
.left{ width: 200px;height: 100%;background-color: #e2e2e2;float: left; }
.left ul{ height: 100%;overflow-y: auto; }
.left ul::-webkit-scrollbar{ display:none; }
.right{ width: 598px;height: 100%;float: left;background-color: #f2f2f2; }
.right-title{ height: 50px;line-height: 50px;width: 100%;padding-left: 10px;border-bottom: 1px solid #d2d2d2; }
#chat-container{ height: 398px;overflow-y: auto; }
#chat-container::-webkit-scrollbar{ display:none; }
.text{ height: 150px;border-top: 1px solid #d2d2d2;position: relative; }

.express{ display: block;height: 30px;width: 100%;padding-left: 10px; }
.express li{ height: 30px;float: left;list-style: none;margin-right: 10px;cursor: pointer; }
.express img{ display: block;height: 25px;width: 25px;margin-top: 3px; }
.txt{ height: 80px;width: 100%;resize: none;border: none;background-color: #f2f2f2;padding: 10px;font-size: 15px; }
textarea:focus{ outline: none; }
.button{ height: 30px;width: 100%; }
.send-btn{ height: 30px;width: 80px;text-align: center;float: right;margin-right: 20px;margin-bottom: 10px; }
.user{ margin: 10px 0px;height: 50px; }
.avatar{ width: 50px;height: 50px;float: left;margin-left: 10px; }
.user-des{ width: 130px;height: 50px;float: left;margin-left: 5px; }
.username{ height: 30px;line-height: 30px;width: 120px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap; }
.user-time{ height: 20px;width: 120px;line-height: 20px;font-size: 12px;color: #2F4056;overflow: hidden;white-space: nowrap; }
.chat{ width: 578px;display: block;margin: 10px;overflow: hidden; }
.chat-time{ font-size: 12px;color: #2F4056;margin-left: 10px; }
.avatar-s{ width: 40px;height: 40px;float: left;margin-top: 5px; }
.chat-content{ float: left; }
.chat p{ display: block;max-width: 450px;margin-left: 10px;background-color: #5FB878;border-radius: 5px;padding: 5px;word-break: all; }
.name-div{ position: absolute;background: rgba(0,0,0,0.6);top: 0px;left: 0px;width: 100%;height: 100%;border-radius: 2px; }
.name-div p{ color: #fff;text-align: center;margin-top: 20px; }
.make-div{ width: 150px;margin: 10px auto; }
.make-div input{ width: 100px; }
.named{ z-index: -999; }
.dialog{ display: block;clear: both;width: 180px;text-align: center;background-color: #5cadff;border-radius: 5px;color: #fff;word-break: break-all;    position: absolute;top: 50%;left: 50%; }