亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

    1. 兼容性視圖模式

      ?<meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>搜索框</title>

    <style type="text/css">

    ? ? ? ?body{

    ? ? ? ? ? background-color: #333;

    ? ? ? ?}

    ? ? ? ?.bg-div{

    ? ? ? ? ? background-image: url("river.jpg");

    ? ? ? ? ? width: 1228px;

    ? ? ? ? ? height: 690px;

    ? ? ? ? ? margin: 0 auto;

    ? ? ? ?}

    ? ? ? ?.logo{

    ? ? ? ? ? background-image: url("logo.png");

    ? ? ? ? ? width: 107px;

    ? ? ? ? ? height: 53px;

    ? ? ? ? ? float: left;

    ? ? ? ? ? margin: -4px 18px 0 0;

    ? ? ? ?}

    ? ? ? ?form{

    ? ? ? ? ? float: left;

    ? ? ? ? ? background-color: #fff;

    ? ? ? ? ? padding: 5px;

    ? ? ? ?}

    ? ? ? ?.search-input-text{

    ? ? ? ? ? border: 0;

    ? ? ? ? ? outline: none;

    ? ? ? ? ? float: left;

    ? ? ? ? ? height: 25px;

    ? ? ? ? ? line-height: 25px;

    ? ? ? ? ? width: 350px;

    ? ? ? ?}

    ? ? ? ?.search-input-button{

    ? ? ? ? ? border: 0;

    ? ? ? ? ? background-image: url("search-button.png");

    ? ? ? ? ? width: 29px;

    ? ? ? ? ? height: 29px;

    ? ? ? ? ? float: left;

    ? ? ? ?}

    ? ? ? ?.search-box{

    ? ? ? ? ? position: absolute;

    ? ? ? ? ? top: 200px;

    ? ? ? ? ? left: 300px;

    ? ? ? ?}

    </style>

    </head>

    <body>

    <div class="bg-div">

    <div class="search-box">

    <div class="logo"></div>

    ? ? <form action="">

    ? ? <input type="text" class="search-input-text"/>

    ? ? <input type="submit" value="" class="search-input-button"/>

    ? ? </form>

    </div>

    </div>

    </body>

    </html>


    查看全部

  • 1.按鈕的對齊使用浮動

    <!doctype html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>搜索框</title>

    <style type="text/css">

    ? ? ? ?body{

    ? ? ? ? ? background-color: #333;

    ? ? ? ?}

    ? ? ? ?.bg-div{

    ? ? ? ? ? background-image: url("river.jpg");

    ? ? ? ? ? width: 1228px;

    ? ? ? ? ? height: 690px;

    ? ? ? ? ? margin: 0 auto;

    ? ? ? ?}

    ? ? ? ?.logo{

    ? ? ? ? ? background-image: url("logo.png");

    ? ? ? ? ? width: 107px;

    ? ? ? ? ? height: 53px;

    ? ? ? ? ? float: left;

    ? ? ? ? ? margin: -4px 18px 0 0;

    ? ? ? ?}

    ? ? ? ?form{

    ? ? ? ? ? float: left;

    ? ? ? ? ? background-color: #fff;

    ? ? ? ? ? padding: 5px;

    ? ? ? ?}

    ? ? ? ?.search-input-text{

    ? ? ? ? ? border: 0;

    ? ? ? ? ? outline: none;

    ? ? ? ? ? float: left;

    ? ? ? ? ? height: 25px;

    ? ? ? ? ? line-height: 25px;

    ? ? ? ? ? width: 350px;

    ? ? ? ?}

    ? ? ? ?.search-input-button{

    ? ? ? ? ? border: 0;

    ? ? ? ? ? background-image: url("search-button.png");

    ? ? ? ? ? width: 29px;

    ? ? ? ? ? height: 29px;

    ? ? ? ? ? float: left;

    ? ? ? ?}

    ? ? ? ?.search-box{

    ? ? ? ? ? position: absolute;

    ? ? ? ? ? top: 200px;

    ? ? ? ? ? left: 300px;

    ? ? ? ?}

    </style>

    </head>

    <body>

    <div class="bg-div">

    <div class="search-box">

    <div class="logo"></div>

    ? ? <form action="">

    ? ? <input type="text" class="search-input-text"/>

    ? ? <input type="submit" value="" class="search-input-button"/>

    ? ? </form>

    </div>

    </div>

    </body>

    </html>


    查看全部
    1 采集 收起 來源：Bing搜索框制作

    2018-07-26

  • 解決瀏覽器兼容問題：

    <meta http-equiv=“X-UA-Compatible” content=“IE-edge”>

    查看全部

  • 大家相互學習一下！

    <!DOCTYPE?html>
<html?lang="en">

<head>
????<meta?charset="UTF-8">
????<title>taobao?search</title>
????<style?type="text/css">
?@font-face?{
????????font-family:?iconfont;
?src:?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
?src:?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix)?format("embedded-opentype"),
?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff)?format("woff"),
?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.tff)?format("truetype"),
?url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont)?format("svg");
?}

????*?{
????????padding:?0;
?margin:?0;
?}

????body?{
????????font-size:?12px;
?line-height:?1.5;
?font-family:?tahoma,?arial,?sans-serif;
?/*font:?12px/1.5?tahoma,?arial,?sans-serif;*/
?}

????a?{
????????text-decoration:?none;
?}

????.search-container?{
????????padding:?10px;
?}

????.search-tips?{
????????float:?right;
?padding:?3px?0?0?15px;
?}

????.search-tips?a?{
????????color:?#6c6c6c;
?}

????.search-button?{
????????float:?right;
?}

????.btn-search?{
????????width:?100px;
?height:?45px;
?background:?url(T1qyj8Fc8aXXc4E9bI-400-300.png)?no-repeat?0?-200px;
?border:?none;
?cursor:?pointer;
?}

????.search-content?{
????????height:?39px;
?background:?#f50;
?overflow:?hidden;
?padding:?3px?0?3px?77px;
?position:?relative;
?}

????.search-content?input?{
????????width:?100%;
?height:?39px;
?line-height:?39px;
?border:?none;
?outline:?none;
?background:?#fff;
?padding:?0?25px?0?25px;
?font-size:?18px;
?}

????.iconfont?{
????????font-family:?iconfont;
?font-size:?12px;
?font-style:?normal;
?color:?#ccc;
?position:?absolute;
?top:?14px;
?left:?85px;
?z-index:?2;
?}

????.search-list?{
????????position:?absolute;
?top:?13px;
?left:?13px;
?z-index:?3;
?width:?72px;
?height:?39px;
?overflow:?hidden;
?background:?#fff;
?border-left:?1px?solid?#e5e5e5;
?border-right:?1px?solid?#e5e5e5;
?}

????.search-list?ul?{
????????list-style:?none;
?}

????.search-list?li?{
????????height:?39px;
?line-height:?39px;
?}

????.search-list?li?a?{
????????display:?block;
?color:?#6c6c6c;
?text-align:?center;
?}

????.search-list?.focus?{
????????background:?#f7f7f7;
?}

????.focusH?{
????????height:?auto;
?border-bottom:?1px?solid?#e5e5e5;
?}
????</style>
</head>

<body>
????<div?class='search-container'>
????????<div?class="search-list"?id="Tab">
????????????<ul?id="tabs">
????????????????<li?id="tab1"?class="focus">
????????????????????<a?href="#">寶貝</a>
????????????????</li>
????????????????<li?id="tab2">
????????????????????<a?href="#">店鋪</a>
????????????????</li>
????????????</ul>
????????</div>
????????<div?class="search-pannel">
????????????<form>
????????????????<div?class="search-tips">
????????????????????<a?href="#">
?高級<br>搜索
????????????????????</a>
????????????????</div>
????????????????<div?class="search-button">
????????????????????<button?class="btn-search"></button>
????????????????</div>
????????????????<div?class="search-content">
????????????????????<input?type="text"?x-webkit-speech=''>
????????????????????<i?class="iconfont">?</i>
????????????????</div>
????????????</form>
????????</div>
????</div>
</body>
</html>


<script?src='http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js'></script>
<script?type="text/javascript">
$('ul').on('mouseenter',?'li',?function()?{
????$('#Tab').addClass('focusH');
?$('li').css('display',?'block');
?$(this).addClass('focus');
?$(this).siblings().removeClass('focus');

?if?($('#Tab').hasClass('focusH'))?{
????????$('ul').on('mouseleave',?function()?{
????????????$('#Tab').removeClass('focusH');
?});
?}
});

$('ul').on('click',?'li',?function(e)?{
????$(this).addClass('focus');
?$(this).siblings().css('display',?'none');
});
</script>


    查看全部

  • 不會原生JS實現JSONP的同學看我代碼

    <html>

<head>
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
????<meta?content="text/html;?charset=utf-8"?http-equiv="content-type"?/>
????<title>bing?search</title>
????<style?type="text/css">
????body?{
????????background-color:?#333;
????}

????.bg-div?{
????????position:?relative;
????????background-image:?url(river.jpg);
????????width:?1228px;
????????height:?690px;
????????margin:?0?auto;
????}

????.logo?{
????????background-image:?url(logo.png);
????????height:?53px;
????????width:?107px;
????????float:?left;
????????margin:?-4px?18px?0?0;
????}

????.search-form?{
????????float:?left;
????????background-color:?#fff;
????????padding:?5px;
????}

????.search-text?{
????????height:?25px;
????????line-height:?25px;
????????float:?left;
????????width:?350px;
????????border:?0;
????????outline:?none;
????}

????.search-button?{
????????background-image:?url(search-button.png);
????????width:?29px;
????????height:?29px;
????????float:?left;
????????border:?0
????}

????.search-box?{
????????position:?absolute;
????????top:?150px;
????????left:?200px;
????}

????.suggest?{
????????display:?none;
????????width:?388px;
????????background-color:?#fff;
????????position:?absolute;
????????margin:?0;
????????padding:?0;
????????border-width:?1px;
????????border-style:?solid;
????????border-color:?#999;
????}

????.suggest?ul?{
????????list-style:?none;
????????display:?block;
????????margin:?0;
????????padding:?0
????}

????.suggest?ul?li?{
????????padding:?3px;
????????line-height:?25px;
????????font-size:?14px;
????????color:?#777;
????????cursor:?pointer;
????????padding:?3px;
????}

????.suggest?ul?li:hover?{
????????background-color:?#e5e5e5;
????????text-decoration:?underline;
????}

????.suggest?strong?{
????????color:?#000;
????}

????.clearfix:after?{
????????display:?block;
????????clear:?both;
????????content:?"";
????????visibility:?hidden;
????????height:?0px;
????}

????.clearfix?{
????????zoom:?1
????}

????.nav?{
????????margin:?0?auto;
????????width:?1228px;
????}

????.nav?ul?{
????????list-style:?none;
????????margin:?0;
????????padding:?0;
????}

????.nav?ul?li?{
????????float:?left;
????????padding:?10px;
????}

????.nav?ul?li?a?{
????????color:?#999;
????????text-decoration:?none;
????????font-size:?12px;
????????font-weight:?bold;
????}

????a:hover?{
????????text-decoration:?underline;
????}
????</style>
</head>

<body>
????<div?class="nav">
????????<ul?class="clearfix">
????????????<li><a?href="#">圖片</a></li>
????????????<li><a?href="#">視頻</a></li>
????????????<li><a?href="#">詞典</a></li>
????????????<li><a?href="#">咨詢</a></li>
????????????<li><a?href="#">地圖</a></li>
????????????<li><a?href="#">影響力</a></li>
????????????<li><a?href="#">更多</a></li>
????????</ul>
????</div>
????<div?class="bg-div">
????????<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"?class="search-text"?name="q"?id="search_input"?autocomplete="off"?/>
????????????????<input?type="submit"?class="search-button"?value=""?/>
????????????</form>
????????</div>
????</div>
????<div?class="suggest"?id="search-suggest"?>
????????<ul?id="search-result">
????????????<li>?搜索內容?</li>
????????????<li>?搜索內容?</li>
????????</ul>
????</div>
????<script>
????var?getDOM?=?function(id)?{
????????return?document.getElementById(id);
????};

????var?addEvent?=?function(id,?event,?fn)?{
????????var?el?=?getDOM(id)?||?document;

????????if?(el.addEventListener)?{
????????????el.addEventListener(event,?fn,?false);
????????}?else?if?(el.attachEvent)?{
????????????el.attachEvent('on'?+?event,?fn);
????????}
????};

????var?getElementLeft?=?function(element)?{
????????var?actualLeft?=?element.offsetLeft,
????????????current?=?element.offsetParent;

????????while?(current?!==?null)?{
????????????actualLeft?+=?current.offsetLeft;
????????????current?=?current.offsetParent;
????????}
????????return?actualLeft;
????};

????var?getElementTop?=?function(element)?{
????????var?actualTop?=?element.offsetTop,
????????????current?=?element.offsetParent;

????????while?(current?!==?null)?{
????????????actualTop?+=?current.offsetTop;
????????????current?=?current.offsetParent;
????????}
????????return?actualTop;
????};

????var?ajaxGet?=?function(url,?callback)?{
????????var?_xhr?=?null;

????????if?(window.XMLHttpRequest)?{
????????????_xhr?=?new?window.XMLHttpRequest();
????????}?else?if?(window.ActiveXObject)?{
????????????_xhr?=?new?ActiveXObject('Msxml2.XMLHTTP');
????????}
????????_xhr.onreadystatechange?=?function()?{
????????????if?(_xhr.readyState?==?4?&&?_xhr.status?==?200)?{
????????????????callback(JSON.parse(_xhr.reponseText));
????????????}
????????};
????????_xhr.open('get',?url,?true);
????????_xhr.send(null);
????};

????var?delegateEvent?=?function(target,?event,?fn)?{
????????addEvent(document,?event,?function(e)?{
????????????if?(e.target.nodeName?==?target.toUpperCase())?{
????????????????fn.call(e.target);
????????????}
????????});
????};

????//?addEvent('search_input','keyup',function(){
????//?????var?searchText=getDOM('search_input').value;

????//?????ajaxGet('http://api.bing.com/qsonhs.aspx?type=cb&&q='+searchText,function(data){
????//?????????var?d?=?data.AS.Results[0].Suggests,
????//?????????????html;

????//?????????for?(var?i?in?d)?{
????//?????????????html?+=?'<li>'?+?d[i].Txt?+?'</li>';
????//?????????}
????//?????????getDOM('search-result').innerHTML=html;

????//?????????var?_dom=getDOM('search-suggest');

????//?????????_dom.style.top=getElementTop(getDOM('search-form'))+getDOM('search-form').offsetHeight+'px';
????//?????????_dom.style.left=getElementLeft(getDOM('search-form'))+'px';
????//?????????_dom.style.position='absolute';
????//?????????_dom.style.display='block';
????//?????});
????//?});

????addEvent('search_input',?'keyup',?function()?{
????????var?searchText?=?getDOM('search_input').value,
????????????url?=?"http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q="?+?searchText,
????????????script?=?document.createElement('script');

????????script.setAttribute('src',?url);
????????document.getElementsByTagName('body')[0].appendChild(script);

????????var?_dom?=?getDOM('search-suggest');

????????_dom.style.top?=?getElementTop(getDOM('search-form'))?+?getDOM('search-form').offsetHeight?+?'px';
????????_dom.style.left?=?getElementLeft(getDOM('search-form'))?+?'px';
????????_dom.style.position?=?'absolute';
????????_dom.style.display?=?'block';
????});

????function?jsonpcallback(data)?{
????????if?(data.AS.FullResults?!=?0)?{
????????????var?d?=?data.AS.Results[0].Suggests,
????????????????html?=?"";

????????????//?console.log(d);
????????????for?(var?i?=?0;?i?<?d.length;?i++)?{
????????????????html?+=?"<li>"?+?d[i].Txt?+?"</li>";
????????????}
????????????getDOM('search-result').innerHTML?=?html;
????????}
????}

????delegateEvent('li',?'click',?function()?{
????????var?keyword?=?this.innerHTML;
????????location.href?=?'http://cn.bing.com/search?q='?+?keyword;
????});

????window.onclick?=?function(e)?{
????????getDOM('search-suggest').style.display?=?'none';
????????e.stopPropagation();
????};
????</script>
</body>

</html>


    查看全部
    3 采集 收起 來源：JS實現Ajax方法

    2018-06-19

  • 有問題的童鞋可以參考我的代碼：

    <html>

<head>
????<meta?http-equiv="X-UA-Compatible"?content="IE=edge"?/>
????<meta?content="text/html;?charset=utf-8"?http-equiv="content-type"?/>
????<title>bing?search</title>
????<style?type="text/css">
????body?{
????????background-color:?#333;
????}

????.bg-div?{
????????position:?relative;
????????background-image:?url(river.jpg);
????????width:?1228px;
????????height:?690px;
????????margin:?0?auto;
????}

????.logo?{
????????background-image:?url(logo.png);
????????height:?53px;
????????width:?107px;
????????float:?left;
????????margin:?-4px?18px?0?0;
????}

????.search-form?{
????????float:?left;
????????background-color:?#fff;
????????padding:?5px;
????}

????.search-text?{
????????height:?25px;
????????line-height:?25px;
????????float:?left;
????????width:?350px;
????????border:?0;
????????outline:?none;
????}

????.search-button?{
????????background-image:?url(search-button.png);
????????width:?29px;
????????height:?29px;
????????float:?left;
????????border:?0
????}

????.search-box?{
????????position:?absolute;
????????top:?150px;
????????left:?200px;
????}

????.suggest?{
????????display:?none;
????????width:?388px;
????????background-color:?#fff;
????????position:?absolute;
????????margin:?0;
????????padding:?0;
????????border-width:?1px;
????????border-style:?solid;
????????border-color:?#999;
????}

????.suggest?ul?{
????????list-style:?none;
????????display:?block;
????????margin:?0;
????????padding:?0
????}

????.suggest?ul?li?{
????????padding:?3px;
????????line-height:?25px;
????????font-size:?14px;
????????color:?#777;
????????cursor:?pointer;
????????padding:?3px;
????}

????.suggest?ul?li:hover?{
????????background-color:?#e5e5e5;
????????text-decoration:?underline;
????}

????.suggest?strong?{
????????color:?#000;
????}

????.clearfix:after?{
????????display:?block;
????????clear:?both;
????????content:?"";
????????visibility:?hidden;
????????height:?0px;
????}

????.clearfix?{
????????zoom:?1
????}

????.nav?{
????????margin:?0?auto;
????????width:?1228px;
????}

????.nav?ul?{
????????list-style:?none;
????????margin:?0;
????????padding:?0;
????}

????.nav?ul?li?{
????????float:?left;
????????padding:?10px;
????}

????.nav?ul?li?a?{
????????color:?#999;
????????text-decoration:?none;
????????font-size:?12px;
????????font-weight:?bold;
????}

????a:hover?{
????????text-decoration:?underline;
????}
????</style>
</head>

<body>
????<div?class="nav">
????????<ul?class="clearfix">
????????????<li><a?href="#">圖片</a></li>
????????????<li><a?href="#">視頻</a></li>
????????????<li><a?href="#">詞典</a></li>
????????????<li><a?href="#">咨詢</a></li>
????????????<li><a?href="#">地圖</a></li>
????????????<li><a?href="#">影響力</a></li>
????????????<li><a?href="#">更多</a></li>
????????</ul>
????</div>
????<div?class="bg-div">
????????<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"?class="search-text"?name="q"?id="search_input"?autocomplete="off"?/>
????????????????<input?type="submit"?class="search-button"?value=""?/>
????????????</form>
????????</div>
????</div>
????<div?class="suggest"?id="search-suggest"?>
????????<ul?id="search-result">
????????????<li>?搜索內容?</li>
????????????<li>?搜索內容?</li>
????????</ul>
????</div>
????<script?src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
????<script>
????$('#search_input').bind('keyup',?function()?{
????????var?jqueryInput?=?$(this);
????????var?searchText?=?jqueryInput.val();
????????$.ajax({
????????????type:?"GET",
????????????async:?true,
????????????url:?'http://api.bing.com/qsonhs.aspx?type=cb&&q='?+?searchText,
????????????dataType:?'jsonp',
????????????jsonp:?'cb',
????????????jsonpCallBack:?'callback',
????????????success:?function(data)?{
????????????????if?(data.AS.FullResults?!=?0)?{
????????????????????var?d?=?data.AS.Results[0].Suggests,
????????????????????????html?=?'';
????????????????????for?(var?i?=?0;?i?<?d.length;?i++)?{
????????????????????????html?+=?'<li>'?+?d[i].Txt?+?'</li>';
????????????????????}
????????????????????$('#search-result').html(html);
????????????????????$('#search-suggest').show().css({
????????????????????????top:?$('#search-form').offset().top?+?$('#search-form').outerHeight(),
????????????????????????left:?$('#search-form').offset().left,
????????????????????????position:?'absolute'
????????????????????});
????????????????}
????????????},
????????????error:?function(e)?{
????????????????console.log(e.responseText);
????????????}
????????});
????????//?$.get('http://api.bing.com/qsonhs.aspx?q='?+?searchText,?function(d)?{
????????//?????var?data?=?d.AS.Results[0].Suggests,
????????//?????????html;
????????//?????for?(var?i?in?data)?{
????????//?????????html?+=?'<li>'?+?data[i].Txt?+?'</li>';
????????//?????}
????????//?????$('#search-result').html(html);
????????//?????$('#search-suggest').css({
????????//?????????top:?$('#search-form').offset().top?+?$('#search-form').height()?+?10,
????????//?????????left:?$('#search-form').offset().left,
????????//?????????position:'absolute'
????????//?????}).show();
????????//?},?'json');
????});
????$(document).click(function()?{
????????$('#search-suggest').hide();
????????return?false;
????});
????$(document).delegate('li',?'click',?function()?{
????????var?keyword?=?$(this).text();
????????location.href?=?'http://cn.bing.com/search?q='?+?keyword;
????});
????</script>
</body>

</html>


    查看全部

  • JQuery?

    $.get(url , callback , 'json');

    url：請求服務器的端口和接口地址

    callback ：回調 服務器返回的數據展示給用戶

    json：返回數據的類型

    查看全部

  • JQuery中的DOM操作

    查看全部

  • <mate http-equiv="X-UA-Compatible" content="IE=edge">

    防止IE不兼容

    查看全部
首頁上一頁1234567下一頁尾頁

舉報

0/150
提交
取消
課程須知
具有HTML、CSS樣式、Javascript、jQuery基礎知識
老師告訴你能學到什么？
可以利用HTML、CSS樣式制作出搜索框效果，并使用Javascript及jQuery代碼實現Ajax技術分別實現搜索引擎的制作。 1. 定位元素 2. 輸入框、按鈕美化 3. 修復IE兼容性問題 4.使用Javascript代碼實現Ajax技術 5.使用 jQuery代碼實現Ajax技術 6.同源原理

微信掃碼，參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復購買，感謝您對慕課網的支持！