浏览器模仿QQ聊天对话框

原因：项目有个功能是咨询，其中咨询详情如果使用以前的进行条目列出就显得效果比较差。用户体验不怎么好，所以希望进行改造。最终效果要想QQ群对话一样，这样用户体验效果要好的多。

好了不多说废话，直接列出代码。

<html>
<style>.getContent1 {padding: 9.5px;margin: 0 0 10px;font-size: 13px;line-height: 20px;word-break: break-all;word-wrap: break-word;background-color: #f5f5f5;border: 1px solid #ccc;border: 1px solid rgba(0, 0, 0, 0.15);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
}.cusp01,.cusp02 {position:absolute;display:block;height:0px;line-height:0px;
}
#left_cusp {}
#left_cusp .cusp01 {left:21px;top:35px;border-top:9px solid #fff;border-bottom:9px solid #fff;border-left:0px;border-right:9px solid #ccc;
}#right_cusp {
}
#right_cusp .cusp01 {right:21px;top:35px;border-top:9px solid #fff;border-bottom:9px solid #fff;border-right:0px;border-left:9px solid #ccc;
}}
</style><div class="" style="position:relative;"> <div style="text-align: left;"><img src="./aaa.gif" width="30" height="30" style="display: inline;"><span style="padding: 4px; position:absolute; top:1px; left:35px; font-size: 10px;">你是谁  2015-10-12 23:24:45</span></div><div id="left_cusp" style="text-align: left;"><div class="getContent1" style="background-color:#FFFF99; margin-top: -8px; margin-left: 30px;margin-right: 200px;text-align: left; display: inline-block ;">都市情感大剧《大好时光》当下正在东方卫视、安徽卫视热播，该剧由金牌编剧王丽萍倾力打造，著名导演夏晓昀掌镜执导，胡歌、王晓晨、许亚军、徐百卉、周楚楚、韩东君、鲁伊莎等联袂主演。该剧播出至今，凭借紧凑的剧情节奏，超高的话题热度雄踞收视榜前列，网络播放量更是逼近两亿大关。</div><span class="cusp01"></span></div>
</div><div class="" style="position:relative;">   <div style="text-align: right;"><span style="padding: 4px; position:absolute; top:1px; right:35px; font-size: 10px;">你是谁  2015-10-12 23:24:45</span><img src="./aab.gif" width="30" height="30" style="display: inline;"></div><div id="right_cusp" style="text-align: right;"><div class="getContent1" style="background-color:#FFFF99; margin-top: -8px; margin-left: 200px;margin-right: 30px;text-align: left; display: inline-block ;">都市情感大剧《大好时光》当下正在东方卫视、安徽卫视热播，该剧由金牌编剧王丽萍倾力打造，著名导演夏晓昀掌镜执导，胡歌、王晓晨、许亚军、徐百卉、周楚楚、韩东君、鲁伊莎等联袂主演。该剧播出至今，凭借紧凑的剧情节奏，超高的话题热度雄踞收视榜前列，网络播放量更是逼近两亿大关。</div><span class="cusp01"></span></div>
</div><div class="" style="position:relative;">   <div style="text-align: right;"><span style="padding: 4px; position:absolute; top:1px; right:35px; font-size: 10px;">你是谁  2015-10-12 23:24:45</span><img src="./aab.gif" width="30" height="30" style="display: inline;"></div><div id="right_cusp" style="text-align: right;"><div class="getContent1" style="background-color:#FFFF99; margin-top: -8px; margin-left: 200px;margin-right: 30px;text-align: left; display: inline-block ;">都市情感大剧《大好时光》当下正在东方卫视、安徽卫视热播。</div><span class="cusp01"></span></div>
</div><div class="" style="position:relative;">   <div style="text-align: left;"><img src="./aaa.gif" width="30" height="30" style="display: inline;"><span style="padding: 4px; position:absolute; top:1px; left:35px; font-size: 10px;">你是谁  2015-10-12 23:24:45</span></div><div id="left_cusp" style="text-align: left;"><div class="getContent1" style="background-color:#FFFF99; margin-top: -8px; margin-left: 30px;margin-right: 200px;text-align: left; display: inline-block ;">都市情感大剧《大好时光》当下正在东方卫视、安徽卫视热播，该剧由金牌编剧王丽萍倾力打造，著名导演夏晓昀掌镜执导，胡歌、王晓晨、许亚军、徐百卉、周楚楚、韩东君、鲁伊莎等联袂主演。该剧播出至今，凭借紧凑的剧情节奏，超高的话题热度雄踞收视榜前列，网络播放量更是逼近两亿大关。</div><span class="cusp01"></span></div>
</div><div class="" style="position:relative;">   <div style="text-align: left;"><img src="./aaa.gif" width="30" height="30" style="display: inline;"><span style="padding: 4px; position:absolute; top:1px; left:35px; font-size: 10px;">你是谁  2015-10-12 23:24:45</span></div><div id="left_cusp" style="text-align: left;"><div class="getContent1" style="background-color:#FFFF99; margin-top: -8px; margin-left: 30px;margin-right: 200px;text-align: left; display: inline-block ;">都市情感大剧《大好时光》当下正在东方卫视、安徽卫视热播。</div><span class="cusp01"></span></div>
</div></html>

以上就是基本代码，可以根据实际情况进行适当的修改。

效果如下图：

OK , 完毕

浏览器模仿QQ聊天对话框相关推荐

QQ聊天对话框内聊天者昵称,发送者昵称的字体颜色怎么设置
最近在模仿腾讯QQ聊天框通过C#,工具我用的是 vs2005 现在我都要抓狂了
[乐意黎原创] 删除QQ的MiniBrowser浏览器，QQ聊天会话中点击链接直接用默认浏览器中打开
[乐意黎原创] 删除QQ自带的MiniBrowser浏览器,使从聊天会话中点击链接直接打开默认浏览器中打开如题,不知从什么版本开始,乐-意-黎无意中发现,点击QQ聊天会计中的链接时,不会在默认浏览器 ...
app打开QQ聊天对话框
现在很多app内涉及到购买商品时,客户和商家在线聊天的(QQ聊天) - (IBAction)goToQQView:(id)sender { // 空白的webview UIWebView * webV ...
QQ聊天对话框（Js实现，支持表情插入文本中间）
一般我们做文本对话框,都考虑使用textarea,其实,用div也可以实现,用div的好处就是可以往里插入图片.表情等,不必都显示为字符. 但是在插入表情图片或插入图片时就面临一个问题,图片怎么才能放 ...
如何通过网页的超连接，显示qq聊天对话框
红色的是我的qq号码.你可以换成你自己的qq号码 <a href="tencent://Message/?Uin= 570917820&websiteName=q-zone.q ...
linux下仿qq聊天源代码,Linux+glade（GTK+）+C语言+mysql的模仿QQ聊天工具（完善版）...
[实例简介] 之前发布的版本没有带myql的运行库,好多人运行不了,这次我重新打包一份包含了mysql 的include 和 lib库 ,这个版本大家可以在本地轻松的编译,文件包内包含了mysql的 ...
手机浏览器打开QQ聊天和群聊天
普通QQ mqqwpa://im/chat?chat_type=wpa&uin=${qq}&version=1&src_type=web&web_src=oicqzon ...
qt小项目代码实现简易的QQ聊天对话框的界面实现
效果显示代码实现 myWindow.h #ifndef WINDOW_H #define WINDOW_H#include <QWidget> #include <QVBoxLay ...
android聊天界面对话气泡_android 模仿QQ聊天气泡入门级示例源码
[实例简介] [实例截图] [核心代码] package com.study.androidtest; import java.util.ArrayList; import android.app.A ...

浏览器模仿QQ聊天对话框

浏览器模仿QQ聊天对话框相关推荐

最新文章

热门文章

浏览器 模仿QQ聊天 对话框

浏览器 模仿QQ聊天 对话框相关推荐

最新文章

热门文章

浏览器模仿QQ聊天对话框

浏览器模仿QQ聊天对话框相关推荐