利用jquery-easyui可以很轻易地实现这个消息框：
<div class="easyui-panel" title="Complex Panel Layout"
icon="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
<div class="easyui-layout" fit="true">
<div region="north" border="false" class="p-search">
<label>Search:</label><input></input>
</div>
<div region="center" border="false">
<div class="easyui-layout" fit="true">
<div region="east" border="false" class="p-right">
<img src="msn.gif" mce_src="msn.gif"/>
</div>
<div region="center" border="false" style="border:1px solid #ccc;"
mce_style="border:1px solid #ccc;">
<div class="easyui-layout" fit="true">
<div region="south" split="true" border="false" style="height:60px;">
<textarea style="overflow:auto;border:0;width:100%;height:100%;">
Hi,I am easyui.
</textarea>
</div>
<div region="center" border="false">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我们无须编写任何JS代码就能够拥有强大的布局能力。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery