注册
登录在聊天的场景中，聊天内容需要用到气泡修饰，如下图。下面一一讲解。
一、图片式：
第一个样式是京东客服，气泡的圆角和钩子都是用了图片。使用了一个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>
- </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"></td><td class="mm">你好，我是stoneniqiu</td><td class="rm"><span></span></td></tr><tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td><td class="time"></td><td></td></tr></tbody></table>
- </div>
样式：
CSS Code复制内容到剪贴板
- .jimi_lists {
- margin: 0 -10px 20px 10px;
- position: relative;
- }
- .jimi_lists .header_img.jimi3 {
- background: url(../img/jimi_50_3.png) no-repeat 0 0;
- }
- .jimi_lists .header_img {
- width: 50px;
- height: 50px;
- position: absolute;
- top: 0;
- left: 0;
- }
- .fl {
- float: left;
- }
- .jimi_lists .msg {
- 声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除
