qq设置聊天气泡,html5动态气泡效果

　　今天自己用HTML/CSS做了个类似即时通信软件的聊天气泡，以下是效果图：

　　以下说下关键地方的样式设置。然后贴出超文本标记语言和钢性铸铁代码（不多)。

　　步骤1：布局

　　消息採用差异浮动布局，每条消息用一个差异标签包裹，里面再放两个差异分别用来包裹用户图标和用户消息内容。左側消息，先清除浮动，然后设置浮动：左侧。这样用户图标和消息内容就能够显示在同一行了，当中用户图标在左边，消息内容紧邻着用户图标。

　　右側消息，相同先清除浮动。然后设置浮：对，这样用户图标和消息显示在同一行了。当中图标在最右边。图标左側是消息。

　　步骤2：设置圆角矩形

　　边框-半径：7px

　　步骤3：三角形箭头

　　n

　　将差异的宽度和高度设置为0,设置边框宽度，能够使其表现出一个由四个三角形组成的矩形，每一个三角形的颜色和大小能够通过设置边界宽度和颜色设置。

　　这里将当中三个三角形颜色设置为透明。仅仅留下一个三角形可见。三角形{宽度：0px高度：0px边框宽度：15px边框样式：纯色；边框颜色：红色蓝色绿色金色；}。三角形{宽度：0px高度：0px边框宽度：15px边框样式：纯色；边框颜色：透明透明透明红色；}关键点4：三角形尾随矩形框

　　使用相对定位。能够使三角形始终固定在矩形框的边上。

　　位置：相对；

　　所有代码：

　　htmlheadstyle /*气泡样式*/。发件人{ clear:两者都有；} .sender div:n-of-type(1){ float:left；} .发件人div:n类型(2){背景色：海蓝宝石；浮动：左；边距：0 20px 10px 15px填充10px 10px 10px 0px边框-半径：7px}。接收div:第一子img，1000 .发件人div:第一子img { width:50px；高度：50px}。接收者{清除：两者；} .receiver div:n-child(1){ float:right；} .接收器部门：第n个类型(2){ float:右；背景色：金色；边距：0 10px 10px 20px填充：10px 0px 10px 10px边框-半径：7px}。左_三角形{ height:0px；宽度：0px边框宽度：8px边框样式：纯色；边框颜色：透明海蓝宝石透明透明；位置：相对；左：-16px；top:3px；} .右_三角形{ height:0px；宽度：0px边框宽度：8px边框样式：纯色；边框颜色：透明透明透明金；位置：相对；右：-16px；top:3px；}/style/床头！-Left-div class= sender div img src= chattemplate example 2 _ files/cat。jpg /div div class= Left _ triangle /div span你好，伙计！/span /div /div！-Right-div class= receiver div img src= chattemplate example 2 _ files/cat。jpg /div div div class= Right _ triangle /div span hello world/span/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。