chat.css
*, *:before, *:after {
box-sizing: border-box;
}
body, html {
height: 100%;
overflow: hidden;
}
body, ul {
margin: 0;
padding: 0;
}
body {
color: #4d4d4d;
font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
background: #f5f5f5 url('images/bg.jpg') no-repeat center;
background-size: cover;
font-smoothing: antialiased;
}
ul {
list-style: none;
}
#chat {
margin: 20px auto;
width: 800px;
height: 600px;
}
#chat {
overflow:hidden;
border-radius:3px
}
#chat .main, #chat .sidebar {
height:100%
}
#chat .sidebar {
float:left;
width:200px;
color:#f4f4f4;
background-color:#2e3238
}
#chat .main {
position:relative;
overflow:hidden;
background-color:#eee
}
#chat .m-text {
position:absolute;
width:100%;
bottom:-30px;
left:0
}
#chat .m-message {
height:calc(100% - 10pc)
}
.m-card {
padding:9pt;
border-bottom:1px solid #24272c
}
.m-card footer {
margin-top:10px
}
.m-card .avatar, .m-card .name {
vertical-align:middle
}
.m-card .avatar {
border-radius:2px
}
.m-card .name {
display:inline-block;
margin:0 0 0 15px;
font-size:1pc;
overflow: hidden;
}
.m-card .search {
padding:0 10px;
width:100%;
font-size:9pt;
color:#fff;
height:30px;
line-height:30px;
border:1px solid #3a3a3a;
border-radius:4px;
outline:0;
background-color:#26292e
}
.m-list li {
padding:9pt 15px;
border-bottom:1px solid #292c33;
cursor:pointer;
-webkit-transition:background-color .1s;
transition:background-color .1s
}
.m-list li:hover {
background-color:hsla(0, 0%, 100%, .03)
}
.m-list li.active {
background-color:hsla(0, 0%, 100%, .1)
}
.m-list .avatar, .m-list .name {
vertical-align:middle
}
.m-list .avatar {
border-radius:2px
}
.m-list .name {
display:inline-block;
margin:0 0 0 15px;
overflow: hidden;
}
.m-text {
height:10pc;
border-top:1px solid #ddd
}
.m-text textarea {
padding:10px;
height:100%;
width:100%;
border:none;
outline:0;
font-family:Micrsofot Yahei;
resize:none
}
.m-message {
padding:10px 15px;
overflow-y:scroll
}
.m-message li {
margin-bottom:15px
}
.m-message .time {
margin:7px 0;
text-align:center
}
.m-message .time>span {
display:inline-block;
padding:0 18px;
font-size:9pt;
color:#fff;
border-radius:2px;
background-color:#dcdcdc
}
.m-message .avatar {
float:left;
margin:10px 10px 0 0;
border-radius:3px
}
.m-message .text {
display:inline-block;
position:relative;
padding:0 10px;
max-width:calc(100% - 40px);
min-height:30px;
line-height:2.5;
font-size:9pt;
text-align:left;
word-break:break-all;
background-color:#fafafa;
border-radius:4px
}
.m-message .text:before {
content:" ";
position:absolute;
top:4px;
right:100%;
border:6px solid transparent;
border-right-color:#fafafa
}
.m-message .self {
text-align:right
}
.m-message .self .avatar {
float:right;
margin:10px 0 0 10px
}
.m-message .self .text {
background-color:#b2e281
}
.m-message .self .text:before {
right:inherit;
left:100%;
border-right-color:transparent;
border-left-color:#b2e281
}
.m-message .nick{
font-size:12px;
color:#C5C5AD;
}
.users{
height: 30px;
width: 100%;
position: absolute;
z-index: 9;
background: #fff;
padding: 5px;
}
chat.css的更多相关文章
- chat.php
<!DOCTYPE html><html> <meta charset="UTF-8"> <title>web chat</t ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)
一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...
- node基于express的socket.io
前一段事件,我一个同学给他们公司用融云搭建了一套web及时通信系统,然后之前我的公司也用过环云来实现web及时通信,本人对web及时通信还是非常感兴趣的.私下读了融云和环信的开发文档,然后发现如果注册 ...
- JSP | 基础 | 在同一表单中提交两个不同的action
通过与跟JS配合使用实现需求 <head> <title>Chat Room</title> <script type="text/javascri ...
- jQuery实时聊天jquery-chat
jquery-chat是基于jQuery UI + Node.js + Socket.IO 实现100%纯JavaScript实时聊天(客户端和服务器都是JS),实现了facebook / Gmail ...
- Swoole 实现在线聊天
Swoole 跟 thinkphp5 结合开发 WebSocket 在线聊天通讯系统 ThinkPHP 使用 Swoole 需要安装 think-swoole Composer 包,前提系统已经安装 ...
- 中级前端必备知识点(2.5w+月薪)进阶 (分享知乎 : 平酱的填坑札记 关注专栏 用户:安大虎)
前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自动化.语义化.封装......等概念熟练运用到工 ...
- Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统
ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展* tp5的项目根目录下执行composer命令安装think- ...
随机推荐
- JMeter 通过JSON Extractor 插件来提取响应结果
接口响应结果,通常为HTML.JSON格式的数据,对于HTML的响应结果的提取,可以通过正则表达式,也可以通过XPath 来提取. 对于JSON格式的数据,可以通过正则表达式.JSON Extract ...
- MySQL主主
MySQL双主(主主)架构方案 在企业中,数据库高可用一直是企业的重中之重,中小企业很多都是使用mysql主从方案,一主多从,读写分离等,但是单主存在单点故障,从库切换成主库需要作改动.因此,如果 ...
- 010 Editor 8.0.1 之 逆向分析及注册机编写
前言一.工具及软件介绍二.逆向分析2.1.找到提示错误注册弹窗2.2.分析跳转处代码2.3.=2D 函数分析2.3.1.获取注册码处分析2.3.2.3处分支分析2.3.2.1.9C情况2.3.2.2. ...
- Asp.net core中实现自动更新的Option
Asp.net core可以监视json.xml等配置文件的变化, 自动刷新内存中的配置内容, 但如果想每隔1秒从zookeeper.consul获取最新的配置信息, 需要自己实现. 阅读了 Asp. ...
- 7A - Max Sum
Given a sequence a[1],a[2],a[3]......a[n], your job is to calculate the max sum of a sub-sequence. F ...
- select2插件用法
1.修改默认查询方法,使其可以根据value查询 this.element.select2({ allowClear: true, matcher: function (term, text, ele ...
- 第一次面试经历(hr面)
经过介绍,我有幸去到一家国际背景的广告公司面试前端开发实习生.收到的邮件是复试通知,看来我已经跳过了第一轮面试. 来到hr请我进了一个小间坐下里填求职书,里面有各种个人信息,有兴趣爱好,有工作经历,以 ...
- NOIP2018游记(划掉) 滚粗记
Day0 早上摸鱼~, 打几个板子就颓废 中午出发, 在火车上颓元气+睡觉. 到了宾馆发现yhx已经帮我们拿了袋子和狗牌,于是上楼欢乐地搓起了六家统, 一直搓到10点钟才回自己房间. 有六家统就有快乐 ...
- cmd下的一些小技巧
切换盘符:[盘符]+: tips1: 在盘符A执行一条命令后的同时切换到盘符B:A:\>dir && B:(此处只能用&&或者&) tips2: 在盘符A ...
- JAVA实现等腰三角形
class Triangle { public static void main(String[] args) { for(int a=0; b<5; a++)//这个代表只有四行 { for( ...