模仿微信的响应式自适应聊天界面
代码语言：html
所属分类：布局界面
代码描述：模仿微信的响应式自适应聊天界面，适配pc端及手机移动设备
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bfw.css">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
.menu {
padding: 0;
margin: 0;
background: #f3f3f3;
}
.menu a {
color: #434343;
}
.msg .cnt .emoji {
width: 20px;
margin: 0;
vertical-align: middle;
float: none;
}
.menu li {
display: block;
height: 1.5em;
padding: 0.3125em 0.625em;
margin: 0.0625em;
border-bottom: 0.0625em solid #f3f3f3;
}
.menu li:hover {
background: #e7e7e7;
}
.menu .selected {
border-bottom: 0.0625em solid #001f50;
border-radius: 0px;
}
.menu .selected a {
color: #084589;
}
.search-bar {
background: white;
width: 50%;
margin: 1.875em auto;
height: 3.125em overflow: hidden;
}
.tag a {
background: #00c6f1;
color: white;
margin: 0.2em 0.1875em;
padding: 0.1875em;
}
.nav-text {
color: #bcbcbc;
}
.nav-text a {
padding: 0.1875em;
color: #bcbcbc;
}
.search-bar input {
outline: none;
border: none;
margin: 0.5em;
}
.search-btn {
height: 3.125em;
background: #d9d9d9;
line-height: 3.125em;
cursor: pointer;
}
.section {
padding: 0.625em;
}
.section .title {
height: 1.875em;
border-bottom: 0.125em solid #001f50;
}
.section ul {
padding: 0;
margin: 0;
list-style: none;
}
.section li {
padding: 5px;
}
.section li a {
color: #5a5a5a;
}
.list-item h3, .list-item p {
padding-left: 1.25em;
}
.list-item p {
color: grey;
}
.nav-item:hover .nav-item_sub {
display: block !important;
}
.nav-item:hover {
background: #2b2c2c;
}
.nav-item a {
color: #cbcbcb;
}
.nav-item_sub a {
padding: 10px;
}
.nav-item a:hover {
color: #2596cc;
}
#back_cavas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50vh;
background: black;
z-index: 1;
}
pre.prettyprint {
background: #f8f7f7;
margin: 0.85em;
padding: 0.85em;
line-height: 1.2em !important;
overflow: scroll;
}
.writer {
display: inline-block;
margin: 5px auto;
width: 6.25em;
height: 6.25em;
border-radius: 6.25em;
-webkit-border-radius: 6.25em;
-moz-border-radius: 6.25em;
border: 0.125em solid #fff;
box-shadow: 0 0 0.25em #ccc;
overflow: hidden
}
.content table {
width: 100%;
}
.content th, .content td {
padding: 10px;
border: 1px solid #ddd;
}
.content p {
padding: 0 0.75em;
}
.content img {
width: 100%;
}
body {
background: #F5F6F7;
}
.contact-ava {
list-style: none;
padding: 0;
margin: 0;
}
.contact-ava li:hover {
background: #2e2e2e;
}
.contact-ava li {
height: 80px;
overflow: hidden;
text-align-left;
cursor: pointer;
}
.contact-ava .avaimg, .ava-bar .avaimg {
margin-top: 10px;
height: 60px;
border-radius: 30px;
background: black;
height: 60px;
border: 1px solid black;
}
.contact-ava .nickname, .ava-bar .nickname {
padding: 7px 5px;
color: white;
}
.contact-ava .lasttime {
padding: 10px;
color: grey;
}
.contact-ava .lastmess {
padding: 5px;
color: grey;
height: 18px;
overflow: hidden;
}
.select-ava {
background: #2e2e2e;
}
.noticetips {
padding: 10px;
position: absolute;
top: 50%;
left: 40%;
background: black;
color: #dfcdcd;
border-radius: 10px;
z-index: 99999;
}
.ava-bar {
background: #2e2e2e;
}
.talk-name {
height: 60px;
line-height: 60px;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #f1f1f1;
padding: 0 30px;
}
.sys-msg {
text-align: center;
font-size: 12px;
color: #ad8787;
line-height: 30px;
}
.chat-item {
overflow: hidden;
padding: 4px 0px 10px 0px;
}
.chat-item .msg {
position: relative;
border-radius: 8px;
border: 1px solid;
}
.chat-item .img {
width: 32px;
height: 32px;
cursor: pointer;
border-radius: 50%;
}
.del-conv-btn {
padding: 5px;
background: red;
color: white;
right: 5px;
top: 4px;
border-radius: 5px;
}
.item-me .img {
float: right;
margin-left: 14px;
}
.item-you .img {
float: left;
margin-right: 14px;
}
.item-you .img, .item-me .img {
width: 32px;
height: 32px;
}
.msg {
position: relative;
border-radius: 8px;
border: 1px solid;
}
.item-you .nick {
color: #3a4a59;
font-size: 12px;
padding-top: 5px;
}
.item-you .msg-text {
float: left;
color: #6b8299;
background: #eaeeef;
border-color: #eee;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px
rgba(0, 0, 0, 0.06);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px
rgba(0, 0, 0, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px
rgba(0, 0, 0, 0.06);
}
.item-me .msg-text {
float: right;
color: #fff;
background: #5cacde;
}
.item-me .download-file {
display: block;
color: #fff;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.item-you .download-file {
display: block;
color: #666;
}
.msg:before, .msg:after {
content: ' ';
position: absolute;
top: 11px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
width: 0;
height: 0;
}
.item-you .msg:before {
right: 100%;
border-right: 5px solid #eaeeef;
}
.item-you .msg:after {
background: none;
}
.item-me .msg:before {
background: none;
}
.item-me .msg:after {
left: 100%;
border-left: 5px solid #5cacde;
}
.item-me .msg .box:before {
background-position: -25px -40px;
}
.msg .box {
position: relative;
padding: 7px 12px;
zoom: 1;
}
.msg .box:before {
background-position: 0 -40px;
}
.msg .box:after {
background-position: 0 -60px;
}
.msg .cnt {
position: relative;
min-height: 20px;
line-height: 20px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
font-size: 14px;
}
.msg .cnt img {
width: 100%;
max-width: 290px;
_width: 290px;
}
.msg .cnt audio {
width: 300px;
height: 35px;
}
.msg .cnt video {
width: 300px;
}
.msg .cnt .chartlet {
width: 120px;
margin: 0;
}
#chat-content {
padding: 30px;
}
.chat-editor {
width: 100%;
height: 100%;
background-color: #fff;
border-top: 1px solid #EBEBEB;
background-color: #fff;
}
.chat-editor-bar {
height: 34px;
padding: 0 24px;
}
.chat-editor-bottom {
height: 38px;
padding: 0 24px;
line-height: 38px;
}
.chat-editor-tips {
color: #CCCCCC;
font-size: 12px;
}
.btn-send {
background-color: #0888ff;
color: #fff;
display: inline-block;
width: 70px;
height: 34px;
line-height: 36px;
text-align: center;
position: absolute;
top: 11px;
right: 15px;
font-size: 12px;
border: 1px solid #0070d9;
}
.btn-send:hover {
color: #fff;
}
.msg-type {
margin-top: 5px;
}
.msg-input {
display: block;
width: 100%;
resize: none;
cursor: text;
outline: none;
background: #fff;
border: 0 none;
overflow-y: auto;
height: 96px;
box-sizing: border-box;
}
.ava-bar {
height: 80px;
border-bottom: 1px solid #535353;
}
.chat-editor-bar a {
cursor: pointer;
}
.chat-editor-bar i {
color: grey;
margin: 10px 4px;
}
.reddots {
right: 15px;
top: 15px;
width: 10px;
height: 10px;
background: red;
border-radius: 5px;
}
.emoji-pan {
list-style: none;
padding: 0;
margin: 0;
}
.emoji-pan li {
float: left;
padding-left: 10px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="app" class="bfw-middle bfw-pos-rel bfw-color-b-w bfw-s-row-100 bfw-m-row-100" style="width: 83%; margin: 0px auto; height: 100vh;">
<div class="bfw-pos-abs" style="height: 100vh; width: 100%; line-height: calc(100vh - 100px); top: 0px; left: 0px; z-index: 999998; background: rgb(61, 61, 61); color: rgb(37, 150, 204); text-align: center; display: none;">
</div>
<div class="noticetips" style="display: none;"></div>
<div class=" bfw-over-hide bfw-width-per bfw-pos-rel" style="height: 100%;">
<div class="bfw-row-30 bfw-s-row-20" style="background: rgb(61, 61, 61); height: 100%;">
<div class="ava-bar bfw-s-hide">
<div class="bfw-row-30 bfw-align-c">
<img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 ">
<div class="nickname" style="padding-top: 25px; font-weight: bold;">
开拓者
<a title="添加好友，建群聊" class="bfw-float-r" style="margin-right: 20px; color: rgb(144, 120, 120);"><i class="fa fa-lg fa-plus"></i></a>
</div>
</div>
</div>
<ul class="contact-ava " style="height: calc(100% - 80px); overflow-y: auto;">
<li class="bfw-pos-rel"><div class="bfw-pos-abs del-conv-btn" style="display: none;">
删除会话
</div>
<div>
<div class="bfw-row-30 bfw-align-c bfw-s-row-100 bfw-pos-rel">
<!----> <img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 bfw-s-hide">
<div class="nickname">
夏美
<div class="bfw-float-r lasttime">
02/23
</div>
</div>
<div class="lastmess ">
[阴笑]
</div>
</div>
</div>
</li><li class="select-ava bfw-pos-rel"><div class="bfw-pos-abs del-conv-btn" style="display: none;">
删除会话
</div>
<div>
<div class="bfw-row-30 bfw-align-c bfw-s-row-100 bfw-pos-rel">
<!----> <img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 bfw-s-hide">
<div class="nickname">
李阳
<div class="bfw-float-r lasttime">
02/19
</div>
</div>
<div class="lastmess ">
在吗
</div>
</div>
</div>
</li><li class="bfw-pos-rel"><div class="bfw-pos-abs del-conv-btn" style="display: none;">
删除会话
</div>
<div>
<div class="bfw-row-30 bfw-align-c bfw-s-row-100 bfw-pos-rel">
<!----> <img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 bfw-s-hide">
<div class="nickname">
校长
<div class="bfw-float-r lasttime">
02/19
</div>
</div>
<div class="lastmess ">
[神奇]
</div>
</div>
</div>
</li><li class="bfw-pos-rel"><div class="bfw-pos-abs del-conv-btn" style="display: none;">
删除会话
</div>
<div>
<div class="bfw-row-30 bfw-align-c bfw-s-row-100 bfw-pos-rel">
<!----> <img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 bfw-s-hide">
<div class="nickname">
院长
<div class="bfw-float-r lasttime">
02/19
</div>
</div>
<div class="lastmess ">
shide
</div>
</div>
</div>
</li><li class="bfw-pos-rel"><div class="bfw-pos-abs del-conv-btn" style="display: none;">
删除会话
</div>
<div>
<div class="bfw-row-30 bfw-align-c bfw-s-row-100 bfw-pos-rel">
<!----> <img src="http://repo.bfw.wiki/bfwrepo/icon/5dfc86c2ea8b7.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_50,h_50,/quality,q_90" class="avaimg">
</div>
<div class="bfw-row-70 bfw-s-hide">
<div class="nickname">
李浩
<div class="bfw-float-r lasttime">
02/19
</div>
</div>
<div class="lastmess ">
hi
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="bfw-row-70 bfw-s-row-80">
<div style="height:100vh; background: rgb(230, 230, 230);">
<div style="height: calc(100vh - 195px);">
<div class="talk-name bfw-pos-rel">
晓梅<a class="bfw-float-r"><i class="fa fa-ellipsis-h"></i></a>
</div>
<div id="chat-container" style="overflow-y: auto; height: c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0