HTML5仿手机微信聊天界面_0

2020-03-24 19:20:59

字体：大中小

来源：转载

供稿：网友

metacharset= UTF-8 title HTML5模拟微信聊天界面 /title style /**重置标签默认样式*/ *{ margin:0; padding:0; list-style:none; font-family:'微软雅黑' } #container{ width:450px; height:780px; background:#eee; margin:80pxauto0; position:relative; box-shadow:20px20px55px#777; } .header{ background:#000; height:40px; color:#fff; line-height:34px; font-size:20px; padding:010px; } .footer{ width:430px; height:50px; background:#666; position:absolute; bottom:0; padding:10px; } .footerinput{ width:275px; height:45px; outline:none; font-size:20px; text-indent:10px; position:absolute; border-radius:6px; right:80px; } .footerspan{ 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; } .footerspan: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; } .contentli{ margin-top:10px; padding-left:10px; width:412px; display:block; clear:both; overflow:hidden; } .contentliimg{ float:left; } .contentlispan{ background:#7cfc00; padding:10px; border-radius:10px; float:left; margin:6px10px010px; max-width:310px; border:1pxsolid#ccc; box-shadow:003px#ccc; } .contentliimg.imgleft{ float:left; } .contentliimg.imgright{ float:right; } .contentlispan.spanleft{ float:left; background:#fff; } .contentlispan.spanright{ float:right; background:#7cfc00; } /style script window.onload=function(){ vararrIcon=['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png']; varnum=0;//控制头像改变 variNow=-1;//用来累加改变左右浮动 varicon=document.getElementById('user_face_icon').getElementsByTagName('img'); varbtn=document.getElementById('btn'); vartext=document.getElementById('text'); varcontent=document.getElementsByTagName('ul')[0]; varimg=content.getElementsByTagName('img'); varspan=content.getElementsByTagName('span'); icon[0].onclick=function(){ if(num==0){ this.src=arrIcon[1]; num=1; }elseif(num==1){ this.src=arrIcon[0]; num=0; } } btn.onclick=function(){ if(text.html' target='_blank'>value==''){ alert('不能发送空消息'); }else{ content.innerHTML+=' li imgsrc= '+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 divid= container div >以上就是本文的全部内容，是不是很精彩，希望对大家的学习有所帮助。原文:http://www.xttblog.com/?p=265html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：HTML文件路径有哪些类型

下一篇：关于HTML中的滚动条-去掉滚动条问题