页面的head部分，需远程调用font-awesome图标字体库，代码如下：

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好消息盒子的标题栏、消息列表和底部的各自内容，代码如下：

<div class='info'>
  <h1>带搜索框可拖动的聊天消息盒子</h1>
  <span>
    智慧小屋
    <i class='fa fa-heart animated infinite pulse'></i>
    <a href='https://jy.tp.yuanmeng.life/'>Richer</a>
    <div class='spoilers'>顶部标题栏可拖拽</div>
  </span>
</div>
<div class='chat'>
  <header>
    <h2 class='title'>
      <a href='https://jy.tp.yuanmeng.life/'>智慧小屋</a>
    </h2>
    <ul class='tools'>
      <li>
        <a class='fa fa-gear' href='#'></a>
      </li>
      <li>
        <a class='fa fa-search' href='#'></a>
      </li>
    </ul>
  </header>
  <div class='body'>
    <div class='search'>
      <input placeholder='Search...' type='text'>
    </div>
    <ul>
      <li>
        <a class='thumbnail' href='#'>鹰眼</a>
        <div class='content'>
          <h3>杰瑞米·雷纳</h3>
          <span class='preview'>嗯嗯，中餐不错哦！</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
      <li>
        <a class='thumbnail' href='#'>寡姐</a>
        <div class='content'>
          <h3>斯嘉丽·约翰逊</h3>
          <span class='preview'>我倒是想吃中餐呢！</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
      <li>
        <a class='thumbnail' href='#'>浩克</a>
        <div class='content'>
          <h3>马克·鲁法洛</h3>
          <span class='preview'>上次不是才吃过的嘛！</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
      <li>
        <a class='thumbnail' href='#'>雷神</a>
        <div class='content'>
          <h3>克里斯·海姆斯沃斯</h3>
          <span class='preview'>去吃阿拉伯烤肉怎么样？</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
      <li>
        <a class='thumbnail' href='#'>美队</a>
        <div class='content'>
          <h3>克里斯·埃文斯</h3>
          <span class='preview'>有啊，不如下周聚餐吧！</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
      <li>
        <a class='thumbnail' href='#'>托尼</a>
        <div class='content'>
          <h3>小罗伯特·唐尼</h3>
          <span class='preview'>队长，你请客的事还有戏吗？</span>
          <span class='meta'>
            2天前&middot;<a href='#'>朋友</a>&middot;<a href='#'>回复</a>
          </span>
        </div>
      </li>
    </ul>
  </div>
  <footer>
    <a href='#'>查看全部消息</a>
  </footer>
</div>

页面的底部，需引入jQuery和UI库，并引入必要的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>