JS+HTML+CSS模仿微信界面发送信息

JS+HTML+CSS仿微信聊天界面
前端新人又来报道咯 欢迎大家指教

功能：

1、点击头像可以模拟切换用户。

2、输入信息，点击发送可以显示在屏幕上。

3、新信息在上方，旧信息在下方，方便有滚动条的时候能直接看到新信息，而不是拖拉滚动条看下面的新内容。

HTML

    

        

            

        
        

            

            
            发送
        
    

CSS

*{
        box-sizing: border-box;
    }
    p,ul,li{
        margin:0;
        padding:0;
    }
    .clearfix::after{
        content: "";
        display: block;
        clear: both;
    }
    #iphone{
        width: 351px;
        height: 692px;
        background: url(images/iphone6.png) no-repeat;
        margin: 0 auto;
        padding:80px 0 95px;
    }
    #wrap{
        width: 313px;
        height: 520px;
        margin:0px auto;
        left:19px;
        top:80px;
        background: linear-gradient(transparent,rgba(0,0,0,.2)),url(images/timg.jpg) no-repeat 50%;
    }
    #div{
        width:100%;
        height:470px;
        margin:0 auto;
        padding:10px;
        overflow: auto;
    }
    #box{
        float: left;
    }
    #btn{
        background:#6abe83;
        border:none;
        width:44px;
        height:34px;
        margin:10px 5px 0 0;
        border-radius: 6px;
        outline: none;
    }
    #inp{
        width:200px;
        height:36px;
        margin:10px 5px 0 0;
        border-radius: 6px;
        border:none;
        outline: none;
        padding:10px;
    }
    #imgWrap{
        float:left;
        margin:10px 5px 0 10px;
    }
    #img{
        width:36px;
        height:36px;
        border-radius: 6px;
    }
    .fr{
        float:right;
    }
    #ul li{
        width:100%;
        list-style: none;
        margin-bottom: 10px;
    }
    .right{
        float:right;
    }
    .left{
        float:left;
    }
    #ul li.left img,#ul li.left div{
        float:left;
    }
    #ul li.right img,#ul li.right div{
        float:right;
    }
    #ul li.right div{
        margin-left: 10px;
    }
    #ul li.right div,#ul li.left div{
        height:36px;
        line-height: 36px;  
    }
    #ul li.left div{
        margin-right: 10px;
    }
    .inps,.inpss{
        background:#6abe83;
        height:20px;
        padding:0 10px;
        border-radius: 8px;
        position: relative;

    }
    .inps::after,.inpss::after{
        content:"";
        position:absolute;
        border-top:6px solid transparent;
        border-bottom:6px solid transparent;
        top:9px;
        
    }
    .inps::after{
        border-right:6px solid #6abe83;
        left:-6px;
    }
    .inpss::after{
        border-left:6px solid #6abe83;
        right:-6px;
    }
    

JS

效果图