• 作者: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

本文隐藏内容 评论刷新本页 后才可以浏览.

点击查看演示


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

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(54)个小伙伴在吐槽
  1. 给楼主一发评论 :razz:
    默默默守候2017-12-06 11:54 回复
  2. 顺风使帆
    ted2017-11-28 14:15 回复
1 4 5 6
×
订阅图标按钮