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

时间:2024-10-02 20:14:21

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;

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  {

float: left;

}

.content li  {

float: right;

}

.content li  {

float: left;

background: #fff;

}

.content li  {

float: right;

background: #7cfc00;

}

 = function(){

var arrIcon = ['/icons/','/wp-content/uploads/2016/03/'];

var num = 0;     //控制头像改变

var iNow = -1;    //用来累加改变左右浮动

var icon = ('user_face_icon').getElementsByTagName('img');

var btn = ('btn');

var text = ('text');

var content = ('ul')[0];

var img = ('img');

var span = ('span');

icon[0].onclick = function(){

if(num==0){

 = arrIcon[1];

num = 1;

}else if(num==1){

 = arrIcon[0];

num = 0;

}

}

 = function(){

if( ==''){

alert('不能发送空消息');

}else {

 += '

'++'';

iNow++;

if(num==0){

img[iNow].className += 'imgright';

span[iNow].className += 'spanright';

}else {

img[iNow].className += 'imgleft';

span[iNow].className += 'spanleft';

}

 = '';

// 内容过多时,将滚动条放置到最底端

=;

}

}

}

业余草:模拟微信聊天界面

14:21

发送