<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>匹配結(jié)果1</li>? ? ? ? <li>匹配結(jié)果2</li>? ? ? ? <li>匹配結(jié)果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只是設(shè)置了5px*/ position:"absolute" }); }); $(document).click(function(event) { $("#content").hide(); });</script></html>
添加回答
舉報(bào)
0/150
提交
取消