您现在的位置是：网站首页> 编程资料编程资料

div+CSS制作类似微信对话气泡效果的实例总结DIV+CSS 清除浮动常用方法总结CSS教程之div垂直居中的多种方法关于div与>div的区别小结Divxdra1031.Dll图片溢出div问题的快速解决方法推荐如何让一个div居于页面正中间【实现方法】css三种方法实现div在浏览器水平居中一个div在浏览器水平居中的实现方法两个div叠加触发事件发生闪烁问题的解决方法

2021-09-05 1094人已围观

简介这篇文章主要介绍了div+CSS制作类似微信对话气泡效果的实例总结,文中总结出了四种编写方式,并且对三角形的绘制有一个补充说明,需要的朋友可以参考下

在聊天的场景中，聊天内容需要用到气泡修饰，如下图。下面一一讲解。
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>
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">你好，我是stoneniqiutd><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复制内容到剪贴板