为了账号安全,请及时绑定邮箱和手机立即绑定

jquery搜索框制作 http://www.imooc.com/video/263

jquery搜索框制作 http://www.imooc.com/video/263

qq_Workmachine_0 2017-09-01 13:56:21
是真不知道问题到底出在哪里啊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>
查看完整描述

1 回答

已采纳
?
ReusKai

TA贡献1条经验 获得超1个赞

css()设置多个 CSS 属性请用“ ,  ”作分隔符

还有jq的取高是 outerHeight


查看完整回答
1 反对 回复 2017-09-01
  • 1 回答
  • 0 关注
  • 1399 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信