給大家帶來的是HTML5仿手機微信聊天界面，截圖效果如下：

源代碼如下：

XML/HTML Code復制內容到剪貼板

 !DOCTYPE html  html  head  meta charset= UTF-8  title HTML5模擬微信聊天界面 /title  style  /**重置標簽默認樣式*/  * {  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 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;  /style  script  window.onload = function(){  var arrIcon = [ http://www.xttblog.com/icons/favicon.ico , http://www.xttblog.com/wp-content/uploads/2016/03/123.png  var num = 0; //控制頭像改變  var iNow = -1; //用來累加改變左右浮動  var icon = document.getElementById( user_face_icon ).getElementsByTagName( img  var btn = document.getElementById( btn  var text = document.getElementById( text  var content = document.getElementsByTagName( ul )[0];  var img = content.getElementsByTagName( img  var span = content.getElementsByTagName( span  icon[0].onclick = function(){  if(num==0){  this.src = arrIcon[1];  num = 1;  }else if(num==1){  this.src = arrIcon[0];  num = 0;  btn.onclick = function(){  if(text.value == ){  alert( 不能發送空消息  }else {  content.innerHTML += li img src= +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  p id= container  p >
以上就是本文的全部內容，是不是很精彩，希望對大家的學習有所幫助。
相關推薦：
HTML5實現分享到微信好友朋友圈QQ好友QQ空間微博二維碼功能
以上就是HTML5仿手機微信聊天界面的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。