是真不知道問題到底出在哪里啊QAQ<!DOCTYPE html><html><head>? <meta charset="UTF-8">? <meta name="viewport" content="width=device-width, initial-scale=1.0">? <meta http-equiv="X-UA-Compatible" content="ie=edge">? <title>bing search</title>? <style type="text/css">? *{font-family: 微軟雅黑,serif;? ? margin: 0;? ? padding: 0;? ? font-size: 14px;}? body{background-color: #333}? .bg-div{background-image: url(river.jpg);? ? ? ? ? margin: 0 auto;? ? ? ? ? width: 1228px;? ? ? ? ? height: 690px;}? .logo{background-image: url(logo.png);? ? ? ? float: left;? ? ? ? margin: -4px 18px 0 0;? ? ? ? width: 107px;? ? ? ? height: 53px;? }? .search-form{? ? float: left;? ? padding: 5px;? ? background-color: #FFF;? }? .search-input-text,? .search-input-button{? ? float: left;? ? border: 0;? }? .search-input-text{? ? outline: none;? ? width: 350px;? ? height: 25px;? ? line-height: 25px;? }? .search-input-button{? ? background-image: url(search-button.png);? ? width: 29px;? ? height: 29px;? }? .search-box{? ? position: absolute;? ? top: 200px;? ? left: 300px;? }? .suggest{? ? width: 388px;? ? background-color: #FFF;? ? border: 1px solid #999;? }? .suggest ul{? ? list-style: none;? }? .suggest li{? ? padding: 4px;? ? line-height: 25px;? ? cursor: pointer;? }? .suggest li:hover{? ? text-decoration: underline;? ? background: #F5F5F5;? }? </style></head><body><div>? <div>? ? <div></div>? ? <form action="https://cn.bing.com/search" target="_blank" id="search-form">? ? ? <input type="text" id="search_input">? ? ? <input type="submit" value="">? ? </form>? </div></div><div style="display:none;" id="search-suggest">? <ul>? ? <li>搜索結果1</li>? ? <li>搜索結果2</li>? </ul></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script><script>$(document).ready(function() {? $('#search_input').on('click',function() {? ? $('#search-suggest').show().css({? ? ? top:$('#search-form').offset().top + $('#search-form').outHeight();? ? ? left:$('#search-form').offset().left;? ? ? position: "absolute";? ? });? })})</script></body></html>
jquery搜索框制作 http://www.xianlaiwan.cn/video/263
qq_Workmachine_0
2017-09-01 13:56:21
