• 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中..
    • 请在Chrome、Firefox等现代浏览器浏览本站。 有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏魔帆博客吧

Html,CSS 实现类似QQ的气泡聊天

目录
[隐藏]

下面是效果图:
Html,CSS 实现类似QQ的气泡聊天

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

步骤1:布局

消息采用div+float布局,每条消息用一个DIV标签包裹,里面再放两个DIV分别用来包裹用户图标和用户消息内容。 左侧消息,先清除浮动,然后设置 float:left,这样用户图标和消息内容就可以显示在同一行了,其中用户图标在左边,消息内容紧邻着用户图标。
右侧消息,同样先清除浮动,然后设置 float:right,这样用户图标和消息显示在同一行了,其中图标在最右边,图标左侧是消息。
Html,CSS 实现类似QQ的气泡聊天

步骤2:设置圆角矩形

border-radius:7px;  

Html,CSS 实现类似QQ的气泡聊天

步骤3:三角形箭头

将DIV的宽度和高度设置为0,设置边框宽度,可以使其表现出一个由四个三角形组成的矩形,每个三角形的颜色和大小可以通过设置border宽度和颜色设置。
这里将其中三个三角形颜色设置为透明,只留下一个三角形可见。
Html,CSS 实现类似QQ的气泡聊天

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

Html,CSS 实现类似QQ的气泡聊天

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

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

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

position:relative;

Html,CSS 实现类似QQ的气泡聊天
ok 已经是我们所要的结果了 :shock:
23333

这是完整css:

.sender{clear:both}.sender div:nth-of-type(1){float:left}.sender div:nth-of-type(2){background-color:#7fffd4;float:left;margin:0 20px 10px 15px;padding:10px 10px 10px 0;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 0 10px 10px;border-radius:7px}.left_triangle{height:0;width:0;border-width:8px;border-style:solid;border-color:transparent #7fffd4 transparent transparent;position:relative;left:-16px;top:3px}.right_triangle{height:0;width:0;border-width:8px;border-style:solid;border-color:transparent transparent transparent gold;position:relative;right:-16px;top:3px}

代码:

<!-- 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>  
点击查看演示
魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明Html,CSS 实现类似QQ的气泡聊天
喜欢 (16)
[]
分享 (0)
Super Paxxs
关于作者:
一只初中狗,对网站建设和编程非常感兴趣。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(52)个小伙伴在吐槽
  1. 学习一下。等等////评论框的输入特效不错啊
    与我越人猫2018-07-15 10:14 回复
  2. 这个可以有
    路过的网友2018-05-06 13:39 回复
  3. 学习一下,感谢分享
    莫欺韶华2018-03-27 17:14 回复
  4. 感觉效果还可以
    在有人炎2018-03-02 15:07 回复
  5. 看着很棒的说
    2018-01-09 16:17 回复
  6. 看着很赞
    2018-01-09 16:16 回复
  7. 不错 想看看源码
    阿杰2017-12-25 15:21 回复
  8. 给楼主一发评论 :razz:
    默默默守候2017-12-06 11:54 回复
  9. 顺风使帆
    ted2017-11-28 14:15 回复
  10. 不错,学习
    小神1号2017-11-21 15:19 回复
1 3 4 5
×
订阅图标按钮