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

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

用到的知识点：

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. 动态向页面中加载