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

微信(小程序)  /  管理员 发布于 7年前   254

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

一、图片式：

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

 

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

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>  
10.             <div class="customer_lists clearfix">  
11.                 <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  
12.                     <div class="header_img_hover"></div>  
13.                 </div>  
14.                 <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>  
15.             </div>  

样式：

CSS Code复制内容到剪贴板

1. .jimi_lists {   
2.     margin: 0 -10px 20px 10px;   
3.     position: relative;   
4. }   
5.  .jimi_lists .header_img.jimi3 {   
6.     background: url(../img/jimi_50_3.png) no-repeat 0 0;   
7. }   
8.  .jimi_lists .header_img {   
9.     width: 50px;   
10.     height: 50px;   
11.     position: absolute;   
12.     top: 0;   
13.     left: 0;   
14. }   
15. .fl {   
16.     float: left;   
17. }   
18.  .jimi_lists .msg {   
19.     margin-left: 59px;   
20.     margin-right: 40px;   
21.     margin-top: 2px;   
22.     float: left;   
23.     display: inline;   
24. }   
25.  .jimi_lists .lt {   
26.     background: url(../img/msg_bg_lr.png) no-repeat 0 0;   
27.     width: 26px;   
28.     height: 10px;   
29. }   
30.  .jimi_lists .tt {   
31.     background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;   
32.     height: 10px;   
33. }   
34. .jimi_lists .rt {   
35.     background: url(../img/msg_bg_lr.png) no-repeat -35px 0;   
36.     width: 10px;   
37.     height: 10px;   
38. }   
39. .jimi_lists .lm {   
40.     background: url(../img/msg_bg_lr.png) repeat-y -94px 0;   
41.     width: 26px;   
42.     vertical-align: top;   
43.     position: relative;   
44. }   
45. .jimi_lists .mm {   
46.     padding: 0 5px;   
47.     background-color: #FFF;   
48.     word-break: break-all;   
49.     word-wrap: break-word;   
50.     color: #333;   
51.     line-height: 20px;   
52. }   
53. .jimi_lists .lm span {   
54.     background: url(../img/msg_bg_lr.png) no-repeat 0 -14px;   
55.     display: inline-block;   
56.     width: 26px;   
57.     height: 16px;   
58.     position: absolute;   
59.     top: 5px;   
60. }   
61. .jimi_lists .rm {   
62.     background: url(../img/msg_bg_lr.png) repeat-y -113px 0;   
63.     width: 10px;   
64. }   
65. .jimi_lists .lb {   
66.     background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;   
67.     width: 10px;   
68.     height: 10px;   
69. }   
70. .jimi_lists .bm {   
71.     background: url(../img/msg_bg_tb.png) repeat-x 0 -25px;   
72.     height: 10px;   
73. }   
74. .jimi_lists .rb {   
75.     background: url(../img/msg_bg_lr.png) no-repeat -35px -43px;   
76.     width: 10px;   
77.     height: 10px;   
78. }   
79.   
80. .customer_lists {   
81.     position: relative;   
82.     margin: 0 12px 20px 20px;   
83. }   
84. .customer_lists .msg {   
85.     float: rightright;   
86.     margin-right: 73px;   
87.     _margin-rightright: 38px;   
88.     margin-top: 2px;   
89. }   
90. .customer_lists .lt {   
91.     background: url(../img/msg_bg_lr.png) no-repeat -47px -0;   
92.     width: 10px;   
93.     height: 10px;   
94. }   
95. .customer_lists .tt {   
96.     background: url(../img/msg_bg_tb.png) repeat-x 0 0;   
97.     height: 10px;   
98. }   
99. .customer_lists .rt {   
100.     background: url(../img/msg_bg_lr.png) no-repeat -63px 0;   
101.     width: 26px;   
102.     height: 10px;   
103. }   
104. .customer_lists .lm {   
105.     background: url(../img/msg_bg_lr.png) repeat-y -126px 0;   
106.     width: 10px;   
107. }   
108. .customer_lists .mm {   
109.     padding: 1px 8px;   
110.     background-color: #3897E7;   
111.     word-break: break-all;   
112.     word-wrap: break-word;   
113.     color: #FFF;   
114. }   
115. .customer_lists .rm {   
116.     background: url(../img/msg_bg_lr.png) repeat-y -129px 0;   
117.     width: 26px;   
118.     vertical-align: top;   
119.     position: relative;   
120. }   
121. .customer_lists .lb {   
122.     background: url(../img/msg_bg_lr.png) no-repeat