前端小項目——模擬微信界面對話框

_{最近看網課做了個小項目，用到了前端很多知識點}

用到的知識點：

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標籤內容：