<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--解决浏览器兼容--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bing search</title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: #333; } .bg { position: relative; background-image: url(http://localhost:23688/river.jpg); width: 1228px; height: 690px; margin: 0 auto; } .search-form { float: left; background-color: #fff; padding: 5px; } .search-button { background-image: url(http://localhost:23688/search-button.png); width: 29px; height: 29px; float: left; border: 0; } .search-text { width: 350px; height: 25px; line-height: 25px; border: 0; float: left; outline: none; /*无边框*/ } .search-box { position: absolute; top: 150px; left: 200px; } .logo { background-image: url(http://localhost:23688/logo.png); width: 107px; height: 53px; float: left; margin: -4px 18px 0 0; } .suggest { width: 388px; background-color: #fff; border: 1px solid #999; } .suggest ul { list-style: none; } .suggest ul li { padding: 3px; font-size: 14px; line-height: 25px; cursor: pointer; /*光标变为手*/ } /*鼠标滑过*/ .suggest ul li:hover { text-decoration: underline; background-color: #e5e5e5; } </style> <script type="text/javascript"> $('#search_input').bind('keyup', function () { $('#search-suggest').show().css({ top: $('#search-form').offset().top + $('#search-form').height + 10, left: $('#search-form').offset().left, position: 'absolute' });//智能提示框 }) </script></head><body> <div class="bg"> <div class="search-box"> <div class="logo"></div> <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form"> <input type="text" name="q" class="search-text" id="search_input" autocomplete="off" /> <input type="submit" class="search-button" value="" /> </form> </div> </div> <div> <div class="suggest" id="search-suggest" style="display:none"> <ul> <li>搜索结果1</li> <li>搜索结果2</li> <li>搜索结果3</li> </ul> </div> </div></body></html>
