模仿微信的响应式自适应聊天界面-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;
        .........完整代码请登录后点击上方下载按钮下载查看