<html><head> <title>bing search</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: #333; } .bg { background-image: url(http://img1.sycdn.imooc.com//52da5e7d0001c0f813660768.jpg); width: 1366px; height: 648px; } .logo { background: url(http://img1.sycdn.imooc.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://img1.sycdn.imooc.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>
- 1 回答
- 0 关注
- 1534 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消