.container { width:400px; height:400px; border-radius:10px; border:1px solid #ddd; margin:40px auto 0; padding:10px; } .content { width:380px; margin:0 auto 20px; height:300px; border:1px solid #aaa; padding:10px; overflow-y:auto; } .container img { width:50px; height:50px; border-radius:50%; margin-right:10px; } .info div { float:left; } .info input { height:42px; line-height:50px; width:250px; margin-right:10px; border-radius:5px; font-size:20px; padding-left:10px; } .info button { height:50px; border-radius:5px; background:none; border:1px solid #ccc; width:60px; font-size:20px; } .content img { width:30px; height:30px; border-radius:50%; vertical-align:top; } #span1 { display:inline-block; max-width:310px; padding:5px; background:#ccc; color:#fff; } #span2 { float:right; max-width:310px; padding:5px; color:#fff; background:green; } #img2 { float:right; margin-left:10px; margin-right:0; } #p1:after { display:block; content:""; clear:both; }
用原生js写模拟手机发送短信,可以进行聊天,点击图片可以切换头像,点击发送,发送已输入的内容