css-網頁聊天窗口對話框

        <!-- 對話框 -->
	<div class="chatlist">
		<p class="time"><span>10:53</span></p>
		<div class="chatin"><!-- 客服 -->
			<img src="{:C(wx)}img/demoface1.png">
			<span>您好歡迎使用趣批油:)</span>
		</div>
		<p class="time"><span>11:01</span></p>
		<div class="chatout"><!-- 詢問 -->
			<img src="{:C(wx)}img/face2.jpg">
			<span>你好，請問什麼時候發貨</span>
		</div>
	</div>
	<!-- 輸入框 -->
	<div class="putIn">
		<input type="text">
		<button type="button" class="mui-btn mui-btn-danger">發送</button>
	</div>

        /*輸入框*/
	.putIn{width:100%;height:50px;padding:6px 12px;position:fixed;bottom:0;}
	.putIn input{width:74%;float:left;background:#fff;}
	.putIn button{width:24%;float:right;}
	.mui-btn-danger{background:#ff0000;height:38px;border:1px solid #ff0000;}
	input[type=text]{border:0;height:38px;margin:0;}
	/*對話框*/
	.chatlist{margin-top:44px;padding:12px;}
	.chatlist p.time{margin:0;text-align: center;}
	.chatlist p.time span{padding:0 18px;display:inline-block;font-size:9pt;color: #fff;border-radius: 2px;background-color: #dcdcdc;}
	.chatlist .chatout,.chatlist .chatin{margin:10px 0;}
	.chatlist .chatout{text-align:right;}
	.chatlist .chatout img{float:right;width:40px;height:40px;border-radius:50%;margin: 0 0 0 10px;}
	.chatlist .chatout span{display: inline-block;position:relative;padding:10px;max-width: calc(100% - 90px);min-height: 40px;line-height:20px;font-size: 13px;word-break: break-all;border-radius: 4px;background-color: #ff0000;color:#fff;}
	.chatlist .chatout span:before{content: " ";position: absolute;top: 9px;left: 100%;border: 6px solid transparent;border-left-color: #ff0000;}
	.chatlist .chatin img{float:left;width:40px;height:40px;border-radius:50%;margin: 0 10px 0 0;}
	.chatlist .chatin span{display: inline-block;position:relative;padding:10px;max-width: calc(100% - 90px);min-height: 40px;line-height:20px;font-size: 13px;word-break: break-all;border-radius: 4px;text-align: left;background-color: #fafafa;}
	.chatlist .chatin span:before{content: " ";position: absolute;top: 9px;right: 100%;border: 6px solid transparent;border-right-color: #fafafa;}