div+CSS制作类似微信对话气泡效果的实例总结

在聊天的场景中，聊天内容需要用到气泡修饰，如下图。下面一一讲解。

一、图片式：

第一个样式是京东客服，气泡的圆角和钩子都是用了图片。使用了一个table组合成了一个圆角的框框。lm样式拼出了钩子。

1. <div class="jimi_lists clearfix">  
2.                 <div class="header_img jimi3 fl"></div>  
3.                 <table class="msg" cellspacing="0" cellpadding="0">  
4.                     <tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr>  
5.                     <tr><td class="lm"><span></span></td><td class="mm"><span class="wel"><span class="visitor"><p>很抱歉，现在人工客服忙，让小JIMI为您解答吧。</p></span></span></td><td class="rm"></td></tr>  
6.                     <tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td></tr>  
7.                     </tbody>  
8.                 </table>  
9.             </div>&