手机聊天页面 html5,HTML5仿手机微信聊天界面

html>

HTML5模拟微信聊天界面

/**重置标签默认样式*/

* {

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;

<