前端小项目——模拟微信界面对话框

_{最近看网课做了个小项目，用到了前端很多知识点}

用到的知识点：

HTML知识点：

1. div大盒子，id为contentALL：包含所有的内容
2. div头部小盒子，id为header：包含整个对话框的头部信息
3. div中间对话内容，id为content：初始化是空的，动态载入
4. div尾部小盒子，id为footer：内容是头像图片，输入框，发送按钮
5. 对于内容区是ul包含的li标签，这点很巧妙。
   以下是完整代码：
   

CSS知识点：

从上之下逐一进行样式设计，用到了浮动，position中子绝父相的规则，overflow处理超出边框部分，border-radius=50%将图片变成圆形等知识点，较为巧妙。
对于内容区的样式代码如下：

Js知识点：

1. 首先考虑头像切换
2. 然后考虑将对话框内容输出到屏幕上，根据不同人发言的内容发布在不同的模块
3. 动态向页面中加载li标签
   以下是切换头像代码：

var img=document.getElementById('icon');
   var arrImg=["img/在笑的猫咪.jpg","img/图.png"];
   var tag=0;
   img.onclick=function(){
     if(tag===0){
      tag=1;
      img.src=arrImg[tag];
     }
     else{
      tag=0;
      img.src=arrImg[tag];
     }
  }

以下是动态加载li标签内容：