html+css模仿微信对话聊天布局

做项目的时候需要模拟聊天的对话信息输出布局，怎么布局调整，怎么定义对话框的布局的呢

工具/原料

电脑

编辑器

方法/步骤

1、聊天模块用ul，li布局，对应如图所示

2、每一条li定义为一句对话内容

3、代码部分，控制整个对话框的样式布局结构详解

4、对话框指向框写法，模拟三角形写法

5、提交部分，用fixed定位相对应屏幕定位于底部，输入法输入的时候可以看到输入内容

6、整体代码效果