<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--解决浏览器兼容--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>bing search</title> <style type="text/css">body{background-color:#333;}.bg{position:relative;background-image:url(http://localhost:23688/river.jpg);width:1228px;height:690px;margin:0 auto;}.search-form{float: left;background-color: #fff;padding:5px;}.search-button{background-image:url(http://localhost:23688/search-button.png);width:29px;height:29px;float:left;border:0;}.search-text{width:350px;height:25px;line-height:25px;border:0;float:left;outline:none;/*无边框*/}.search-box{position:absolute;top:150px;left:200px;}.logo{background-image:url(http://localhost:23688/logo.png);width:107px;height:53px;float:left;margin:-4px 18px 0 0;}.suggest{width:388px;background-color:#fff;border:1px solid #999;}.suggest ul{list-style:none;margin:0;padding:0;}.suggest ul li{padding:3px;font-size:14px;line-height:25px;cursor:pointer;/*光标变为手*/}/*鼠标滑过*/.suggest ul li:hover{text-decoration:underline;background-color:#e5e5e5;} </style> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $('#search_input').bind('keyup', function () { $('#search-suggest').show().css({ top: $('#search-form').offset().top+$('#search-form').height, left: $('#search-form').offset().left,position:'absolute'});//智能提示框}) </script> </head><body> <div class="bg"> <div class="search-box"> <div class="logo"></div> <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form"> <input type="text" name="q" class="search-text" id="search_input" autocomplete="off" /> <input type="submit" class="search-button" value="" /> </form> </div> </div> <div> <div class="suggest" id="search-suggest" style="display:none"> <ul> <li>搜索结果1</li> <li>搜索结果2</li> <li>搜索结果3</li> </ul> </div> </div></body></html>
目前暂无任何回答
- 0 回答
- 0 关注
- 1187 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消