类似于微信会话聊天列表

<!DOCTYPE html>
<html>

<head>
<title>微信会话小三角</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,
maximum-scale=1.0,user-scalable=no">
<style type="text/css">
body {
font-family: "Helvetica Neue";
height: 100%;
-webkit-background-size: cover;
background-size: cover;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}

::-webkit-scrollbar-track {
background-color: transparent;
}

.bubble.right:before,
.bubble.right:after {
left: 100%;
}

.bubble.left:before,
.bubble.left:after {
left: 100%;
}

.bubble:before,
.bubble:after {
position: absolute;
top: 14px;
border: 6px solid transparent;
content: " ";
}

.bubble.bubble_primary.right:after {
border-left-color: #00ca7e;
border-left-width: 4px;
}

.bubble.bubble_primary.right {
background-color: #00ca7e;
margin-bottom: 20px;
}

.bubble.bubble_primary.left {
background-color: #b2e221;
}

.bubble.bubble_primary.left:before {
border-right-color: #b2e281;
border-right-width: 4px;
left: -10px;
}

.bubble_cont {
word-wrap: break-word;
word-break: break-all;
min-height: 25px;
}

.bubble {
vertical-align: top;
position: relative;
text-align: left;
font-size: 14px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 0 10px;
}

.bubble_cont .plain {
padding: 9px 13px;
}

pre {
margin: 0;
font-family: inherit;
font-size: inherit;
white-space: pre-wrap;
word-break: initial;
}
</style>
</head>

<body>
<div class="bubble js_message_bubble ng-scope bubble_primary right">
<div class="bubble_cont ng-scope">
<div class="plain">
<pre class="js_message_plain ng-binding">好久不见了,最近好吗?</pre>
</div>
</div>
</div>

<div class="bubble js_message_bubble ng-scope bubble_primary left">
<div class="bubble_cont ng-scope">
<div class="plain">
<pre class="js_message_plain ng-binding">还好,你那边怎么样?</pre>
</div>
</div>
</div>
</body>
</html>

时间: 2024-11-09 05:43:24

类似于微信会话聊天列表的相关文章

Android仿微信SlideView聊天列表滑动删除效果

package com.ryg.slideview; import com.ryg.slideview.MainActivity.MessageItem; //Download by http://www.okbase.net import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import andro

【源码】仿QQ5.0和微信的滑动删除聊天列表

仿QQ5.0和微信的滑动删除聊天列表 功能分类:特效 支持平台:Android 运行环境:Android 开发语言:Java 开发工具:Eclipse 源码大小:2.21MB 下载地址:http://t.cn/R7eluap 源码简介 滑动删除ListView的Itemdemo 源码运行截图    

【iOS基础控件 - 11】【Demo】模仿qq ,微信 UI 聊天界面

A.需求 做出一个类似于QQ.微信的聊天界面 1.每个cell包含发送时间.发送人(头像).发送信息 2.使用对方头像放在左边,我方头像在右边 3.对方信息使用白色背景对话框,我方信息使用蓝色背景对话框 4.隐藏相同的发送时间 5.底部功能按钮:语音按钮.消息输入框.表情按钮.附加按钮 6.响应键盘事件,呼出键盘.隐藏键盘时对上述的视图作出上移操作 7.键盘的发送事件处理 Code Source: B.实现点 1.底层视图搭建 上部分聊天信息框:UITableView 下部分功能区:UIButt

Android 仿微信QQ聊天界面

一些IM聊天软件的展现形式是左右分开的形式.比如说,别人给你发的信息全部靠左显示,你自己发给别人的信息全部靠右显示. 而我们的ListView很多时候是显示同一个布局,其实BaseAdapter中有2个重要的方法在大多数情况下我们并未使用到,一个是public int getViewTypeCount(),显示ListView中有多少种布局(默认是显示是1),像微信那样聊天界面,是有2种布局方式:另外一个getItemViewType(),可以让不同item条目加载不同的布局,下面就简单的模拟下

微信安卓版下载 Android微信各版本列表

前面ytkah弄了一个iso微信各版本列表,现在就来整一个微信 for Android各版本列表,方便大伙下载.每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.资源收集于网络,不用谢,请叫我雷锋,哈哈哈 微信 6.3.18 for Android 全新发布2016-05-25 微信 6.3.16 for Android 全新发布2016-04-19 微信 6.3.15 for Android 全新发布2016-03-15 微信 6.3.13 for Android

一款基于微客服的仿微信的聊天软件

一款基于微客服的仿微信的聊天软件 服务分类: 其它开发,推送 使用服务: 微客服 , 小米推送 功能分类: 社交 支持平台: Android 运行环境: Android 开发语言: Java 开发工具: Eclipse 源码大小: 7.11MB 下载地址:http://www.devstore.cn/code/info/68.html 源码简介 通过集成微客服的SDK和小米推送等常用SDK实现一款仿微信聊天的工具. 源码片段 源码运行截图 热门源码下载: 高仿京东商城 Android快速开发不可

Android仿微信语音聊天界面

有段时间没有看视频了,昨天晚上抽了点空时间,又看了下鸿洋大神的视频教程,又抽时间写了个学习记录.代码和老师讲的基本一样,网上也有很多相同的博客.我只是在AndroidStudio环境下写的. --主界面代码-- public class MainActivity extends Activity { private ListView mListView; private ArrayAdapter<Recorder> mAdapter; private List<Recorder>

【源码分享下载】一款基于微客服的仿微信的聊天软件

一款基于微客服的仿微信的聊天软件 服务分类: 其它开发,推送 使用服务: 微客服 , 小米推送 功能分类: 社交 支持平台: Android 运行环境: Android 开发语言: Java 开发工具: Eclipse 源码大小: 7.11MB 下载地址:http://www.devstore.cn/code/info/68.html 源码简介 通过集成微客服的SDK和小米推送等常用SDK实现一款仿微信聊天的工具. 源码片段 源码运行截图

如何在App中实现IM功能之七快速实现聊天列表排序模块——箭扣科技Arrownock

如何在App中实现IM功能 之七 快速实现聊天列表排序模块 一台设备由于用户的使用习惯差异,可能导致设备的时间和实际收发消息的时间不同,这里与大家分享利用anIM收发消息时,如何根据数据中的msgId和timestamp来进行排序. 实现逻辑 发消息时,我们需要调用anIM的sendMessage方法(同类方法还有sendBinary, sendMessageToTopic等等),这个方法有一个返回数据为messageId,即当前这一条聊天消息的唯一标识,我们需要将这个messageId保存下来