【HTML5】实现QQ聊天气泡效果

今天自己用 HTML/CSS 做了个类似QQ的聊天气泡，下面是效果图：

下面说下关键地方的样式设置，然后贴出html和css代码（不多）。

步骤1：布局

消息采用div+float布局，每条消息用一个DIV标签包裹，里面再放两个DIV分别用来包裹用户图标和用户消息内容。

左侧消息，先清除浮动，然后设置 float：left，这样用户图标和消息内容就可以显示在同一行了，其中用户图标在左边，消息内容紧邻着用户图标。

右侧消息，同样先清除浮动，然后设置 float:right，这样用户图标和消息显示在同一行了，其中图标在最右边，图标左侧是消息。

步骤2：设置圆角矩形

border-radius:7px;

步骤3：三角形箭头
将DIV的宽度和高度设置为0，设置边框宽度，可以使其表现出一个由四个三角形组成的矩形，每个三角形的颜色和大小可以通过设置border宽度和颜色设置。
这里将其中三个三角形颜色设置为透明，只留下一个三角形可见。

    .triangle{width: 0px;height: 0px;border-width: 15px;border-style: solid;border-color: red blue green gold;}

    .triangle{width: 0px;height: 0px;border-width: 15px;border-style: solid;border-color: transparent transparent transparent red;}

关键点4：三角形跟随矩形框

使用相对定位，可以使三角形始终固定在矩形框的边上。

position:relative;

全部代码：

<html>
<head>
<style>/* bubble style */.sender{clear:both;}.sender div:nth-of-type(1){float: left;}.sender div:nth-of-type(2){background-color: aquamarine;float: left;margin: 0 20px 10px 15px;padding: 10px 10px 10px 0px;border-radius:7px;}.receiver div:first-child img,.sender div:first-child img{width:50px;height: 50px;}.receiver{clear:both;}.receiver div:nth-child(1){float: right;}.receiver div:nth-of-type(2){float:right;background-color: gold;margin: 0 10px 10px 20px;padding: 10px 0px 10px 10px;border-radius:7px;}.left_triangle{height:0px;  width:0px;  border-width:8px;  border-style:solid;  border-color:transparent aquamarine transparent transparent;  position: relative;left:-16px;top:3px;}.right_triangle{height:0px;  width:0px;  border-width:8px;  border-style:solid;  border-color:transparent transparent transparent gold;  position: relative;right:-16px;top:3px;}</style>
</head>
<body>
<!-- Left -->
<div class="sender"><div><img src="chatTemplateExample2_files/cat.jpg"></div><div><div class="left_triangle"></div><span> hello, man! </span></div></div>
<!-- Right --><div class="receiver"><div><img src="chatTemplateExample2_files/cat.jpg"></div><div><div class="right_triangle"></div><span> hello world </span></div></div>
</body>
</html>

【HTML5】实现QQ聊天气泡效果相关推荐

html做一个qq气泡,HTML5实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局消息採用div+float布局,每条消息用一个 ...
html聊天效果,HTML5实现QQ聊天气泡效果
今天自己用 html/css 做了个类似qq的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局消息採用div+float布局,每条消息用一个 ...
【HTML5】简单实现QQ聊天气泡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
java怎么做qq的聊天气泡_【HTML5】实现QQ聊天气泡效果
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图: 以下说下关键地方的样式设置.然后贴出html和css代码(不多). 步骤1:布局消息採用div+float布局,每条消息用一个 ...
使用css实现QQ聊天气泡效果
这是效果图~ html代码: <div class="bubbleDiv"><div class="bubbleItem"> <! ...
HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...
qq气泡php接口,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下今天自己用 HTML/CSS 做了个类似QQ的聊天气 ...
防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果
教程:http://m.blog.csdn.net/blog/yhc13429826359/38778337 写的很好.自己实现的时候,由于img float:left,会脱离文档流,导致结构混乱. ...

【HTML5】实现QQ聊天气泡效果

【HTML5】实现QQ聊天气泡效果相关推荐

最新文章

热门文章