防qq聊天界面纯HTML5,html5 实现qq聊天的气泡效果

教程：http://m.blog.csdn.net/blog/yhc13429826359/38778337

写的很好。自己实现的时候，由于img float:left，会脱离文档流，导致结构混乱。

学到的知识是：clear:both；

清除当前定义的元素左右浮动

诸如：

clear:left; //清除左浮动

clear:right; //清除右浮动

clear:both; //清除左右两边浮动

自己敲后的代码

@charset 'utf-8';

.con{

width:200px;

height:400px;

background-color:#f8f8f8;

.item{

clear:both;

.image-con{

float:left;

img{

width:50px;

height:50px

}

}

.msg-con{

background-color: olive;

float:left;

margin:0 20px 10px 15px;

padding:10px;

padding-left:0;

border-radius:7px;

img{

width:50px;

height:50px

}

}

}

}

html

message

message

message

.item 的高度还是0，但是它会正常的排好。

HTML5实现微信聊天气泡效果

最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码:

QQ聊天界面的布局和设计(IOS篇)-第二季

QQChat Layout - 第二季 本来第二季是快写好了, 也花了点功夫, 结果gitbook出了点问题, 给没掉了.有些细节可能会一带而过, 如有疑问, 相互交流进步~. 在第一季中我们完成了Q ...

QQ聊天界面的布局和设计(IOS篇)-第一季

我写的源文件整个工程会再第二季中发上来~,存在百度网盘, 感兴趣的童鞋, 可以关注我的博客更新,到时自己去下载~.喵~~~ QQChat Layout - 第一季 一.准备工作 1.将假数据messa ...

随机推荐

【linux使用】bash shell命令行常用快捷键 (转载)

移动: Ctrl + A: 移动到当前编辑的命令行首, Ctrl + E: 移动到当前编辑的命令行尾, Ctrl + F 或 ->:按字符右移(往命令行尾部方向,前移) Ctrl + B 或 & ...

div内的img下出现几像素的空白间距解决办法

现象描述: 解决方法: 1.设父元素的font-size:0; 2.设img为display:block; 3.设img为vertical-align:middle;

oracle 中将字符转换为blob 类型

示例如下: select id,mblx,mbmc,TO_BLOB(UTL_RAW.CAST_TO_RAW(mbsj))mbsj,qyid,qycode from tempuser.temp_cwht ...

如何解析C语言的声明

一个声明:int *p[] 分为四部分: (1)p (2)p右面的符号(可以什么都没有) (3)p左面的符号(可以什么都没有) (4)最左面的类型说明符 解读一个声明先从p开始,然后的顺序是:右左右左 ...

Mysql 时间差(年、月、天、时、分、秒)

SELECT TIME_TO_SEC(TIMEDIFF('2018-09-30 19:38:45', '2018-08-23 10:13:01')) AS DIFF_SECOND1, -- 秒 UNI ...

django默认模板引擎和jinja2模板引擎

在使用中,大家会发现django默认模板引擎有很多局限性,最明显的就是四则运算.就只能加减,乘除都不支持.另外还有判断相等,不能直接if,要用ifequal.确实不太方便.还有一点,django默认模 ...

并发编程(一)—— volatile关键字和 atomic包

本文将讲解volatile关键字和 atomic包,为什么放到一起讲呢,主要是因为这两个可以解决并发编程中的原子性.可见性.有序性,让我们一起来看看吧. Java内存模型 JMM(java内存模型) ...

[转]GitLab-CI与GitLab-Runner

本文转自:https://www.jianshu.com/p/2b43151fb92e 一.持续集成(Continuous Integration) 要了解GitLab-CI与GitLab Runne ...

Delphi APP 開發入門(三)簡易計算機

Delphi APP 開發入門(三)簡易計算機 分享: Share on facebookShare on twitterShare on google_plusone_share   閲讀次數:68 ...