给大家带来的是html5仿手机微信聊天界面，截图效果如下：
源代码如下：
xml/html code复制内容到剪贴板
nbsp;html>   html>   head>       meta charset=utf-8>       title>html5模拟微信聊天界面title>       style>     /**重置标签默认样式*/            * {                margin: 0;                padding: 0;                list-style: none;                font-family: '微软雅黑'            }            #container {                width: 450px;                height: 780px;                background: #eee;                margin: 80px auto 0;                position: relative;                box-shadow: 20px 20px 55px #777;            }            .header {                background: #000;                height: 40px;                color: #fff;                line-height: 34px;                font-size: 20px;                padding: 0 10px;            }            .footer {                width: 430px;                height: 50px;                background: #666;                position: absolute;                bottom: 0;                padding: 10px;            }            .footer input {                width: 275px;                height: 45px;                outline: none;                font-size: 20px;                text-indent: 10px;                position: absolute;                border-radius: 6px;                right: 80px;            }            .footer span {                display: inline-block;                width: 62px;                height: 48px;                background: #ccc;                font-weight: 900;                line-height: 45px;                cursor: pointer;                text-align: center;                position: absolute;                right: 10px;                border-radius: 6px;            }            .footer span:hover {                color: #fff;                background: #999;            }            #user_face_icon {                display: inline-block;                background: red;                width: 60px;                height: 60px;                border-radius: 30px;                position: absolute;                bottom: 6px;                left: 14px;                cursor: pointer;                overflow: hidden;            }            img {                width: 60px;                height: 60px;            }            .content {                font-size: 20px;                width: 435px;                height: 662px;                overflow: auto;                padding: 5px;            }            .content li {                margin-top: 10px;                padding-left: 10px;                width: 412px;                display: block;                clear: both;                overflow: hidden;            }            .content li img {                float: left;            }            .content li span{                background: #7cfc00;                padding: 10px;                border-radius: 10px;                float: left;                margin: 6px 10px 0 10px;                max-width: 310px;                border: 1px solid #ccc;                box-shadow: 0 0 3px #ccc;            }            .content li img.imgleft {                 float: left;             }            .content li img.imgright {                 float: right;             }            .content li span.spanleft {                 float: left;                background: #fff;            }            .content li span.spanright {                 float: right;                background: #7cfc00;            }        style>       script>           window.onload = function(){                var arricon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];                var num = 0;     //控制头像改变                var inow = -1;    //用来累加改变左右浮动                var icon = document.getelementbyid('user_face_icon').getelementsbytagname('img');                var btn = document.getelementbyid('btn');                var text = document.getelementbyid('text');                var content = document.getelementsbytagname('ul')[0];                var img = content.getelementsbytagname('img');                var span = content.getelementsbytagname('span');                   icon[0].onclick = function(){                    if(num==0){                        this.src = arricon[1];                        num = 1;                    }else if(num==1){                        this.src = arricon[0];                        num = 0;                    }                                }                btn.onclick = function(){                    if(text.value ==''){                        alert('不能发送空消息');                    }else {                        content.innerhtml += 'li>img src='+arricon[num]+'>span>'+text.value+'span>li>';                        inow++;                        if(num==0){                            img[inow].classname += 'imgright';                            span[inow].classname += 'spanright';                        }else {                            img[inow].classname += 'imgleft';                            span[inow].classname += 'spanleft';                        }                        text.value = '';         // 内容过多时,将滚动条放置到最底端         contentcontent.scrolltop=content.scrollheight;                      }                }            }        script>   head>   body>       div id=container>           div class=header>               span style=float: left;>业余草:模拟微信聊天界面span>               span style=float: right;>14:21span>           div>           ul class=content>           ul>           div class=footer>               div id=user_face_icon>                   img src=http://www.xttblog.com/icons/favicon.ico alt=>               div>               input id=text type=text placeholder=说点什么吧...>               span id=btn>发送span>           div>       div>   body>   html>  
以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。
原文:http://www.xttblog.com/?p=265