*, *: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的更多相关文章

  1. chat.php

    <!DOCTYPE html><html> <meta charset="UTF-8"> <title>web chat</t ...

  2. 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  3. python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)

    一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...

  4. node基于express的socket.io

    前一段事件,我一个同学给他们公司用融云搭建了一套web及时通信系统,然后之前我的公司也用过环云来实现web及时通信,本人对web及时通信还是非常感兴趣的.私下读了融云和环信的开发文档,然后发现如果注册 ...

  5. JSP | 基础 | 在同一表单中提交两个不同的action

    通过与跟JS配合使用实现需求 <head> <title>Chat Room</title> <script type="text/javascri ...

  6. jQuery实时聊天jquery-chat

    jquery-chat是基于jQuery UI + Node.js + Socket.IO 实现100%纯JavaScript实时聊天(客户端和服务器都是JS),实现了facebook / Gmail ...

  7. Swoole 实现在线聊天

    Swoole 跟 thinkphp5 结合开发 WebSocket 在线聊天通讯系统 ThinkPHP 使用 Swoole 需要安装 think-swoole Composer 包,前提系统已经安装 ...

  8. 中级前端必备知识点(2.5w+月薪)进阶 (分享知乎 : 平酱的填坑札记 关注专栏 用户:安大虎)

    前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自动化.语义化.封装......等概念熟练运用到工 ...

  9. Swoole跟thinkphp5结合开发WebSocket在线聊天通讯系统

    ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展* tp5的项目根目录下执行composer命令安装think- ...

随机推荐

  1. FPGA驱动步进电机

    步进电机 步进电机是将电脉冲信号转变为角位移或线位移的开环控制电机,是现代数字程序控制系统中的主要执行元件,应用极为广泛.在非超载的情况下,电机的转速.停止的位置只取决于脉冲信号的频率和脉冲数,而不受 ...

  2. mysql 文件

    慢查询日志 log_query_time 查询时间超过这个值则会出现在慢查询日志中,默认值是10 log_slow_queries  是否开启慢查询 log_queries_not_using_ind ...

  3. requests+django+bs4实现一个web微信的功能

    前言: 今天我们利用requests模块+django+bs4浏览器来实现一个web微信的基本功能,主要实现的功能如下 a.实现返回二维码 b.实现手机扫码后二维码变成变成头像 c.实现手机点击登陆成 ...

  4. 多线程同步synchornized、volatile、Atomic、CountDownLatch示例

    synchronized关键字 锁对象.synchronized(this)和synchronized方法都是锁当前对象. import java.util.concurrent.TimeUnit; ...

  5. 十四、new Comparator<T>实现多重排序结果

    1.编写实现类 package com.abcd; public class Person{ private String name; private int age; private int sal ...

  6. redis常用服务安装部署

    常用服务安装部署   学了前面的Linux基础,想必童鞋们是不是更感兴趣了?接下来就学习常用服务部署吧! 安装环境: centos7 + vmware + xshell 即将登场的是: mysql(m ...

  7. rest_framework的视图组件继承过哪些类?

  8. tcp拥塞控制 tahoe reno new reno sack

    http://www.docin.com/p-812428366.html http://www.docin.com/p-812428366.html

  9. 探索未知种族之osg类生物---渲染遍历之裁剪一

    前言 上面我们用了四节课的内容,讲解了一些osg概念性的内部原理.希望大家可以再看今天的讲解之前先再仔细的研究一下前四节的内容.这样你就会对整个osg的渲染过程有一个更加清晰的认知,有助于理解下面两个 ...

  10. hive资料

    Hive基本操作 Hive 解锁操作 之前使用Hive,出现过一种情况:在代码正在执行insert into或insert overwrite时,中途手动将程序停掉,会出现卡死情况,只能执行查询操作, ...