css-网页聊天窗口对话框
来源:互联网 发布:项目进度跟踪软件 编辑:程序博客网 时间:2024/06/08 00:05
<!-- 对话框 --><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;}
阅读全文
0 0
- css-网页聊天窗口对话框
- HTML,CSS,JS实现网页聊天窗口
- 网页链接QQ聊天对话框
- 网页弹出qq聊天窗口
- 弹出式窗口及网页对话框
- 通过网页直接打开QQ聊天窗口
- 网页上打开qq聊天帮助窗口
- javascript网页对话框,模态窗口(showModalDialog)
- 如何通过网页的超连接,显示qq聊天对话框
- 如何通过网页的超连接,显示qq聊天对话框
- 在网页中 生成QQ在线临时对话框/聊天
- 网页显示QQ在线点击弹出聊天对话框代码
- 聊天对话框
- 网页地址打开QQ窗口和对方聊天
- 聊天窗口
- 聊天窗口
- JS+CSS打造可拖动的聊天窗口层
- 网页聊天
- CPU卡中T=0通讯协议的分析与实现
- 史上最全设计模式导学目录(完整版)
- SecureCRT常用命令分享 SecureCRT命令大全
- jQuery源码解析--jQuery.noConflict() 函数详解
- ASP 异步加载—不会Ajax也能用
- css-网页聊天窗口对话框
- Delphi中BeginUpdate和EndUpdate作用
- HTML学习笔记CSS
- 解决php报错configure: error: xml2-config not found. Please check your libxml2 installation
- Github简单教程
- java判断某一字符串是否包含另一个字符串
- 逆置、翻转链表/查找单链表的倒数第k个节点/A+B不使用四则运算++ -- 等
- 用eclipse打开一个文件,左边的树怎么自动对应文件
- TestLink学习一:Windows搭建Apache+MySQL+PHP环境