聊天对话栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.arrow-left {
top: 5px;
left: -20px;
position: absolute;
width: 0px;
height: 0px;
border: solid 10px;
border-color: white #44ff86 white white;
}

.send-left {
margin-right: 60px;
margin-left: 60px;
position: relative;
min-height: 40px;
background-color: #44ff86;
border-radius:5px;
}

.arrow-right {
top: 5px;
right: -20px;
position: absolute;
width: 0px;
height: 0px;
border: solid 10px;
border-color: white white white #44aaff;
}

.send-right {
margin-left: 60px;
margin-right: 60px;
position: relative;
background-color: black;
min-height: 40px;
background-color: #44aaff;
border-radius:5px;
}

p {
margin: 15px 15px 15px 15px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var imgs = document.images;
var showImg = document.getElementById("imgShow");
var showDiv = document.getElementById("divshow");
for (var i = 0; i < imgs.length; i++)
{
(function (x) {
imgs[x].onclick = function () {
showImg.src = this.getAttribute("src");
showDiv.style.display = "block";
}
})(i);
}
if (showImg.style.display = "block")
{
document.getElementById("close").onclick = function () {
showDiv.style.display = "none";
};
}
};
</script>
</head>
<body>
<div style="margin-left: 10px; margin-right: 10px; margin-top: 10px;position:relative;">
<div id="divshow" style="position:relative;display:none;">
<span style="font-weight:900;font-size:20px;position:absolute;color:red;z-index:9999;float:right;left:-7px;top:-7px;" id="close">×</span>
<img src="" style="position:absolute;top:10px;left:10px;z-index:9998;" id="imgShow"/>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">
您好,我是民科客服编号【K1100002】,很高兴为您服务!
</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">不v刹v不不v刹不v承包才vv刹吧</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="http://wx.qlogo.cn/mmopen/392ric14QM4F7UrD3oMf52eMib2w0yrP3dr9aT5bNVhiapDDibNFyBo4VTowc58eqfmQw0LT4ynA6QazVb7Zjl41Ww/0" style="width: 40px; height: 40px; float: left;" />
<div class="send-left">
<div class="arrow-left"></div>
<p style="word-break: break-all;"><img src="Image/3.jpg" style="width: 40px; height: 40px; float: left;" />刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v刹v不不v刹不v承包才v</p>
</div>
</div>
<div style="margin-top: 30px;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\HeaderPhoto.png" style="width: 40px; height: 40px; float: right;" />
<div class="send-right">
<div class="arrow-right"></div>
<p style="word-break: break-all;">
<img src="E:\Dev10.2.3\微信客服\Minke.Wiexin.WebApp\MinKe.Weixin\bin\Debug\聊天图片\o_Y6AwrnuZ8N5SDj4OjKjncxUsmY_636013198730206136.png" style="width: 50%;" /></p>
</div>
</div>
</div>
</body>
</html>

时间: 2024-10-10 16:52:50

聊天对话栏的相关文章

Python Socket 编程——聊天室演示样例程序

上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和client的代码了解主要的 Python Socket 编程模型.本文再通过一个样例来加强一下对 Socket 编程的理解. 聊天室程序需求 我们要实现的是简单的聊天室的样例,就是同意多个人同一时候一起聊天.每一个人发送的消息全部人都能接收到,类似于 QQ 群的功能,而不是点对点的 QQ 好友之间的聊天.例如以下图: 图来自:http://www.ibm.com/developerworks/linux/tu

局域网聊天【带照片】

package com.kaige123;/** * 消息页面 * @author 凯哥 * */public class MessageFrame extends JFrame {    //把消息分成两部分    private JSpinner spinner = new JSpinner();    //发送文本框    public JTextArea textArea = new JTextArea();    //网络名称    private String uname="&quo

自写聊天室_LinuxC实现(4)——项目文档

西邮Linux兴趣小组  暑期项目 项目名称:    happychat        项目作者:      楚东方     1. 引言 1.1 项目综述 对项目进行简要介绍,并说明编写此项目的目的. 该项目为聊天室,主要为了实现聊天,文件传输,方便linux环境下的,交流与聊天. 实现功能: 1.好友管理: (1)添加好友 (2)删除好友 2.群管理 (1)创建群 (2)加群 (3)退群 (4)解散群 3.文件传送 实现了上传和下载的断点续传 4.聊天界面分屏 利用光标的移动对输入和屏幕聊天记

手把手教你做蓝牙聊天应用(一)-设计方案

前言 通过"计算器"和"视频播放器"我们已经能够开始开发一些比较像样的应用了. 今天,我们将开始制作一个"蓝牙聊天"应用.这个应用其实很简单,没有炫酷的界面,就是一对一.通过蓝牙连接两台设备,让两个人互相发送信息. 可别觉得它太无聊.没有什么实用性,其实我们正是想通过它让你开始接触网络编程(蓝牙和wifi都是无线连接技术,它们的程序设计方法和思路非常的相似). 另外,学会了使用蓝牙,就为大家打开了技术开发的另一扇大门-物联网,现在很多物联网硬件都

QQ聊天信息提取

先前在iOS 8.x版时,往往未能顺利取出QQ的聊天信息,即使顺利取出数据库,却发现聊天信息已被加密处理,仅只能得知是与哪些QQ号进行聊天,而未能顺利得知聊天内容. 但这个情况到后来有了变化,以下情境为: iOS 9.2.1 QQ v6.2.3 以iBackup Viewer查看计算机上的iTunes Backup,在[Applications]中找到名为QQ.app的项目,这里头便是QQ这个App所有的数据,包括配置文件.数据库文件.图文件等等. QQ的聊天信息是存放在名为QQ.db的文件之中

Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命

Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/liuguilin.html 日后我所写的特效专辑也会以一添加在这个专栏上,今天写的这个特效,是关于聊天的,你肯定遇到过,就是你跟人家聊天的时候,比如发送应(么么哒),然后屏幕上全部就是表情了,今天我们就是做这个,撒花的特效,国际惯例,上图 截图 实现这样的效果,你要知道贝塞尔曲线,何谓贝塞尔曲线?其实

java Swing局域网聊天软件+ 情侣电脑钢琴

2013年的时候刚刚看完毕向东老师的黑马程序员教程,对swing产生了很浓厚的兴趣,很多朋友应该和我有同样的感受吧!学了这么久java一直都面对 乌漆麻黑的dos窗口搞,终于能做个窗口了,心里好开心的.像看见了光明似的.记得第一次写个程序弹出个Frame的时候心里真的是很激动的.后来我在Swing中花了很多时间去研究,毕竟没有老师指导所以不知道Swing其实也不值得花那么多时间.对于Swing做为了解就好了.有空余时间看看还不错. 不过虽然在Swing耽误了许多时间,但是也做了点东西玩玩咯. 写

Android,iOS打开手机QQ与指定用户聊天界面

在浏览器中可以通过JS代码打开QQ并弹出聊天界面,一般作为客服QQ使用.而在移动端腾讯貌似没有公布提供类似API,但是却可以使用schema模式来启动手机QQ. 以下为具体代码: Android: String url="mqqwpa://im/chat?chat_type=wpa&uin=123456"; startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); iOS: UIWebView *webView

用L脚本语言开发一个简单的局域网聊天程序

#scp #这是一个简单的局域网聊天程序的例子 定义:字符串,string1 定义:字符串,string2 #addr1是对方的地址 #addr2是自己的地址 #如果addr1和addr2相同,就是自己和自己聊天 定义:地址,addr1,127.0.0.1,27015 定义:地址,addr2,127.0.0.1,27015 定义:整数,字节数,0 #在自己的UDP端口上监听 定义:网络连接,conn2,UDP 监听:conn2,addr2 #连接对方的UDP端口 定义:网络连接,conn1,UD