类似于微信会话聊天列表
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了类似于微信会话聊天列表相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于类似于微信会话聊天列表的主要内容，如果未能解决你的问题，请参考以下文章