HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍
这篇文章主要介绍了HTML5实现QQ聊天气泡效果,用 HTML/CSS 做了个类似QQ的聊天气泡,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天自己用 HTML/CSS 做了个类似QQ的聊天气泡,以下是效果图:
以下说下关键地方的样式设置。然后贴出html和css代码(不多)。
步骤1:布局
消息採用p float布局,每条消息用一个p标签包裹,里面再放两个p分别用来包裹用户图标和用户消息内容。左側消息,先清除浮动,然后设置 float:left。这样用户图标和消息内容就能够显示在同一行了,当中用户图标在左边,消息内容紧邻着用户图标。
右側消息,相同先清除浮动。然后设置 float:right,这样用户图标和消息显示在同一行了。当中图标在最右边。图标左側是消息。
步骤2:设置圆角矩形border-radius:7px;
步骤3:三角形箭头
&n
将p的宽度和高度设置为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;
所有代码:
/* bubble style */
.sender{
clear:both;
}
.sender p:nth-of-type(1){
float: left;
}
.sender p:nth-of-type(2){
background-color: aquamarine;
float: left;
margin: 0 20px 10px 15px;
padding: 10px 10px 10px 0px;
border-radius:7px;
}
.receiver p:first-child img,
.sender p:first-child img{
width:50px;
height: 50px;
}
.receiver{
clear:both;
}
.receiver p:nth-child(1){
float: right;
}
.receiver p: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;
}
hello, man!
hello world
HTML怎么做类似QQ聊天气泡,h5实现QQ聊天气泡的实例介绍相关推荐
- h5移动端聊天室|仿微信界面聊天室|h5多人聊天室
今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...
- java 气泡_JAVA实现QQ聊天气泡
最近做了聊天气泡功能,为自己的聊天室美化了一下聊天效果: 先来看一下效果: 主要的思路是:以一个JTextPane作为显示的面板,然后自定义一个组件JBubble气泡组件来实现他的聊天气泡,然后通过J ...
- java qq通信,Java通信-仿QQ聊天项目
前后历时一个多月的Java实现聊天通信项目-仿QQ聊天室基本告一段落,期间面对了很多问题,也有不同的解决方案,重写了几次核心代码,等等问题.现在在项目的结束之时,给自己做一个总结,算是一个回顾,算是一 ...
- h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...
- iOS开发-聊天气泡的绘制和聊天消息列表
iOS开发中什么最重要?流媒体?即时通讯?还是其他什么技术?其实都不是,最重要的东西诚然只是iOS的基础,比如画一个按钮,封装一个控件,扩展一个类等等.这些东西看似简单,实则很难,所有的技术都基于这些 ...
- android qq字体大小设置快捷键,电脑端QQ怎么将字体选择设置为气泡模式
电脑端QQ怎么将字体选择设置为气泡模式 用惯了手机QQ的气泡模式,那么不妨把电脑也修改一下吧.今天小编就告诉大家电脑端QQ怎么将字体选择设置为气泡模式. 具体如下: 1. 打首先我们打开电脑中的QQ, ...
- 仿QQ拖动删除未读消息个数气泡之二
在仿QQ拖动删除未读消息个数气泡这篇文章中,模仿了QQ的删除未读消息气泡,不过也遗留了一个问题,当时为了让气泡能够在全屏范围内拖动,不能将其放在布局文件xml中,而是采用了在主布局加载完成后用addV ...
- kali linux wps 2019 删除_一分钟,轻松上手 Linux 安装QQ,让你简单开启聊天办公新环境...
说起linux,对于新手和老司机都有不同的见地,那对于新手来说,如何在linux上安装QQ,满足日常办公需求呢,今天为大家说一说安装的小技巧. 第一步说起linux,一般采用办公桌面的环境最佳选择也是 ...
- THINKPHP聊天软件H5实时聊天室自动分配账户全开源商业源码
介绍: THINKPHP聊天软件H5实时聊天室,自动分配账户,全开源商业源码 都是去年买的,很多买的源码基本都下架了, 源码的优点: 运营版本的聊天室,可以添加好友,建立群组,私聊,禁言功能 H5+T ...
最新文章
- 思科路由器ACL通配符
- wampserver环境配置局域网访问
- 敏捷测试2015新看点
- java数据库编程——Insert and Retrieve Images from MySql Table Using Java
- Java NIO学习
- 日期传递过程_买东西别再只看生产日期和保质期了!快算算你一天吃了多少添加剂?...
- @Autowired @Qualifier
- 迅捷cad_迅捷泛型
- fanuc系统屏蔽服务器,FANUC系统常见的3种锁轴方法及坐标轴字母含义
- 解读前端历届主流框架
- log怎么用计算机,手机计算器log怎么用
- excel vba 字典使用方法学习
- 干货!假新闻检测:观察新闻本身,更要观察它所在的新闻环境
- vue-版的老虎机抽奖活动效果折腾小记
- revel MySQL_使用Revel(go)开发网站
- 字节二面(估计是凉了)
- Protected or Private?
- 2017-03-27Oracle故障gc buffer busy acquire导致数据库不可用
- Java设计模式-结构型-门面模式
- 1407C. Chocolate Bunny(交互,推导)
热门文章
- ocelot 自定义认证和授权
- 张善友:自由之精神,中国之队长
- 实体类的动态生成(二)
- Oracle .NET Core Beta驱动已出,自己动手写EF Core Oracle
- 《你必须掌握的Entity Framework 6.x与Core 2.0》书籍出版
- .NET Core 2.0使用NLog
- 在ASP.NET Core 2.0中使用CookieAuthentication
- 为什么转换到Visual Studio 2017如此 “容易”
- C#工业物联网和集成系统解决方案的技术路线
- php.ini-development和php.ini-production的区别