body,html{ height: 100%; width: 100%; padding: 0; margin: 0; background: #eee; } a{ color: #f30; text-decoration: none; } a:hover{ color: #990; } .box{ position: relative; height: 100%; width: 100%; } .head{ height: 40px; background: #fff; line-height: 40px; text-align: center; font-size: 14px; position: absolute; width: 100%; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .msgbox{ position: absolute; width: 100%; height: calc(100% - 122px); overflow: auto; padding:5px 0; top: 40px; } .form{ height: 50px; position: absolute; bottom: 0; left: 0; width: 100%; } .form-body{ padding:.5rem; } .input{ height: 2rem; line-height: 2rem; padding: 0; margin: 0; outline: none; width: calc(100% - 7.2rem); border: none; background: #fff; border-radius: .2rem; text-indent: .5rem; } .push{ outline: none; width: 4rem; height: 2rem; font-size: .7rem; color: #fff; background: #f00; border-radius: .2rem; border:none; float: right; } .push:hover{ background: #e40000; } .msg{ padding: 5px 10px; } .avatar{ display: inline-block; width: 2.4rem; vertical-align: top; } .avatar img{ width: 2.4rem; height: 2.4rem; border-radius: 100%; } .text{ max-width: calc(80% - 2.4rem); display: inline-block; padding-left: .5rem; vertical-align: top; } .ubox{ font-size: 12px; color: #999; padding-bottom: 5px; } .msg-text{ background: #fff; font-size: 14px; padding:6px 10px; border-radius: 5px; display: inline-block; line-height: 180%; position: relative; } .msg-mine{ text-align: right; } .msg-mine .text{ padding-right: .5rem; padding-left: 0; } .msg-mine .msg-text{ color: #fff; background: #f00; } .msg-text:after{ content: ''; width: 0px; height: 0px; display: inline-block; position: absolute; border:10px; border-color: #fff transparent transparent transparent; border-style: solid; top: 12px; left: -10px; } .msg-mine .text .msg-text:after{ content: ''; width: 0px; height: 0px; display: inline-block; position: absolute; border:10px; border-color: #f00 transparent transparent transparent; border-style: solid; top: 12px; left: auto; right: -10px; } .close{ position: absolute; right: .5rem; top: .5rem; color: #f00; font-size: .7rem; z-index: 9999; } .hello{ background: #fff; padding: .5rem; margin:.25rem .5rem; font-size: 12px; border-radius: 5px; } .qa{ background: #fff; padding: .5rem; margin:.25rem .5rem; font-size: 12px; border-radius: 5px; padding-left: 4rem; position: relative; } .qa:before{ content: '猜您想問(wèn)'; width: 1.6rem; height: calc(100% - 1rem); color: #fff; left: 0; top: 0; display: inline-block; position: absolute; font-size: 16px; padding: .5rem; text-align: center; background: #fc0; border-radius: 5px 0 0 5px; } ul, ul li{ padding: 0; margin: 0; list-style: none; } .qa ul li{ padding: .25rem 0; } .quick{ background: #fff; padding: .5rem; margin:.25rem .5rem; font-size: 12px; border-radius: 5px; position: relative; } .quick-head{ text-indent: 10px; border-left: 5px solid #f60; } .apps{ width: 24.8%; text-align: center; float: left; font-size: .6rem; padding:5px 0; } .msg-text ul, .msg-text li{ font-size: 12px; margin: 0; padding: 0; list-style: none; } .msg-text li a{text-decoration: none;} .facelist{ background: #fff; box-shadow: 0 0 5px 2px rgba(0,0,0,0.1); padding:.75rem .5rem; border-radius: .25rem; position: absolute; bottom: 3.5rem; left: .5rem; width: calc(100% - 2rem); height: 11.5rem; display: none; } .facelist:after{ content: ''; width: 0px; height: 0px; display: inline-block; position: absolute; border:6px; border-color: #fff transparent transparent transparent; border-style: solid; bottom: -12px; right: 5.35rem; } .facelist img{ padding: .25rem; }