<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带搜索框可拖动的聊天消息盒子</title>
<link rel='stylesheet prefetch'
href='http:// www.yx67.com /font-awesome/4.3.0/css/font-awesome.min.css'>
<link type="text/css"rel="stylesheet" href="css/style.css">
</head>
<body>
<div class='chat'>
<header>
<h2 class='title'>拖动窗口</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天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>寡姐</a>
<div class='content'>
<h3>斯嘉丽·约翰逊</h3>
<span class='preview'>我倒是想吃中餐呢！</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>浩克</a>
<div class='content'>
<h3>马克·鲁法洛</h3>
<span class='preview'>上次不是才吃过的嘛！</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>雷神</a>
<div class='content'>
<h3>克里斯·海姆斯沃斯</h3>
<span class='preview'>去吃阿拉伯烤肉怎么样？</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>美队</a>
<div class='content'>
<h3>克里斯·埃文斯</h3>
<span class='preview'>有啊，不如下周聚餐吧！</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>托尼</a>
<div class='content'>
<h3>小罗伯特·唐尼</h3>
<span class='preview'>队长，你请客的事还有戏吗？</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回复</a>
</span>
</div>
</li>
</ul>
</div>
<footer>
<a href='#'>查看全部消息</a>
</footer>
</div>
<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>
<divstyle="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoftYaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.hailituo.cn/"target="_blank">源码</a></p>
</div>
</body>
</html>
联系客服
