主要介绍了HTML5实现QQ聊天气泡效果，用 HTML/CSS 做了个类似QQ的聊天气泡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

今天自己用 HTML/CSS 做了个类似QQ的聊天气泡，以下是效果图： 以下说下关键地方的样式设置。然后贴出html和css代码（不多）。 步骤1：布局   消息採用div+float布局，每条消息用一个DIV标签包裹，里面再放两个DIV分别用来包裹用户图标和用户消息内容。左側消息，先清除浮动，然后设置 float：left。这样用户图标和消息内容就能够显示在同一行了，当中用户图标在左边，消息内容紧邻着用户图标。 右側消息，相同先清除浮动。然后设置 float:right，这样用户图标和消息显