* { margin:0; padding:0; list-style:none; font-family:'微软雅黑' } #container { width:450px; height:380px; 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; }
点击头像可以切换角色。尝试用好友的视角来接受信息把