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

2020-05-07 06:37:04易采站长站整理

在聊天的场景中,聊天内容需要用到气泡修饰,如下图。下面一一讲解。
201641111629651.png (648×466)

一、图片式:

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

 

XML/HTML Code复制内容到剪贴板

<div class="jimi_lists clearfix">  
                <div class="header_img jimi3 fl"></div>  
                <table class="msg" cellspacing="0" cellpadding="0">  
                    <tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr>  
                    <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>  
                    <tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td></tr>  
                    </tbody>  
                </table>  
            </div>  
            <div class="customer_lists clearfix">  
                <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  
                    <div class="header_img_hover"></div>