今天我们就用JavaScript来制作一个对话框,如下图
![](https://i-blog.csdnimg.cn/blog_migrate/6ef1900f80a57deed7602700d382dd02.png)
第一步 布局
布局是比较繁琐的一个步骤,也是必不可少的一个步骤,如果前期布局不好,后期还的在进行修改。所以我们就用最简单的方式来布局
用一个大的div标签包裹着四个小的div标签,第一个div标签包裹两个小的div标签这两个div标签用来做“手机”的听话筒。第二个div用来做聊天的对象。
第三个div用来做对话的两个人的头像和对话框。所以第三个的布局有些麻烦。先用一个div标签包裹两个span标签一个span标签为头像,另一个span标签为对话框。另一个也是相同的布局。
第四个div标签要包裹一个select标签,select标签里包裹两个option标签。select是一个下拉框用来切换两个人的对话,option则是下拉框的内容部分。还需要一个button按钮和一个input标签。这样子,基本的布局就完成了(下图为作者的布局)
<div class="bigbox">
<div class="box">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
<div class="head">王老师</div>
<div class="sz" id=