模仿微信的响应式自适应聊天界面-html代码-BFW代码库

代码语言：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 cl.........完整代码请登录后点击上方下载按钮下载查看