<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>帶搜索框可拖動(dòng)的聊天消息盒子</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'>拖動(dòng)窗口</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'>嗯嗯，中餐不錯(cuò)哦！</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回復(fù)</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='#'>回復(fù)</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='#'>回復(fù)</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='#'>回復(fù)</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>美隊(duì)</a>
<div class='content'>
<h3>克里斯·埃文斯</h3>
<span class='preview'>有啊，不如下周聚餐吧！</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回復(fù)</a>
</span>
</div>
</li>
<li>
<a class='thumbnail' href='#'>托尼</a>
<div class='content'>
<h3>小羅伯特·唐尼</h3>
<span class='preview'>隊(duì)長，你請(qǐng)客的事還有戲嗎？</span>
<span class='meta'>
2天前·<ahref='#'>朋友</a>·<ahref='#'>回復(fù)</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 >源碼</a></p>
</div>
</body>
</html>
聯(lián)系客服
