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