<html>
<head>
<title>bing search</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
.bg {
background-image: url(http://img.mukewang.com/52da5e7d0001c0f813660768.jpg);
width: 1366px;
height: 648px;
}
.logo {
background: url(http://img.mukewang.com/52da5e530001eea901070053.jpg) no-repeat;
width: 107px;
height: 53px;
float: left;
margin-top: -10px;
margin-right: 20px;
}
.search-form {
float: left;
background-color: #fff;
width: 407px;
padding: 5px;
}
.search-box {
position: absolute;
top: 20%;
left: 8%;
}
.input-text {
float: left;
font-size: 100%;
width: 375px;
height: 30px;
line-height: 30px;
outline: none;
border: 0;
}
.input-submit {
float: left;
height: 29px;
width: 29px;
/*图片位于document位置 x=30px y=107px*/
background: transparent url(http://img.mukewang.com/52da5df800012b1e02220137.jpg) no-repeat -30px -107px;
border:0;
cursor: pointer;
}
#content {
background: white;
overflow: hidden;
width: 375px;
height: 150px;
font-size: 16px;
display: none;
}
#content ul li {
padding: 5px 5px 5px 10px;
}
#content ul li:hover {
background-color:#ccc;
cursor: pointer;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="bg">
<div class="search-box">
<div class="logo"></div>
<form action="https://www.bing.com/search" target="_blank" method="get" class="search-form">
<input type="text" id="search_content" class="input-text" name="wd">
<input type="submit" class="input-submit" value="">
</form>
</div>
<div id="content">
<ul>
<li>匹配结果1</li>
<li>匹配结果2</li>
<li>匹配结果3</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
$("#search_content").keyup(function(event) {
/* Act on the event */
$("#content").show();
$("#content").css({
left: $(".search-form").offset().left,
top: $(".search-form").offset().top+$("#search_content").height()+10,/*这里为什么是加10呢，我看了一下上面代码padding只是设置了5px*/
position:"absolute"
});
});
$(document).click(function(event) {
$("#content").hide();
});
</script>
</html>
weenhall