CSS 帶搜索導(dǎo)航欄

文為大家介紹如何使用 CSS 創(chuàng)建一個帶搜索的導(dǎo)航欄。

以下實例均是響應(yīng)式的。

可以先看下效果圖：

創(chuàng)建一個搜索欄

HTML 代碼

</div>

CSS 代碼

/* 在頂部導(dǎo)航欄中添加黑色背景顏色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

ss3動畫實現(xiàn)搜索框另類的切換特效

效果圖：

未點擊搜索圖標(biāo)前

點擊搜索圖標(biāo)后會出現(xiàn)動畫過渡成圖中的展示效果

實現(xiàn)代碼：

html:

css:

js代碼：

言

在說這個之前，想必大家應(yīng)該都比較了解搜索引擎了，它就是通過用戶在瀏覽器輸入框中輸入文本，從而顯示一些結(jié)果，你覺得哪項符合你要搜索的內(nèi)容，你就點擊哪項。

【一、項目準(zhǔn)備】

瀏覽器：360瀏覽器

編輯器：Sublime Text 3

插件：Jquery-3.2.1.Min.Js

【二、項目實現(xiàn)】

由于是要實現(xiàn)一個網(wǎng)頁搜索引擎，所以我們需要借用網(wǎng)頁三劍客（Html+Css+Javascript）,然后實現(xiàn)這一功能。

1.打開百度分析網(wǎng)頁結(jié)構(gòu)

我們可以先看看百度的搜索引擎：

可以看到，這個搜索框的部分設(shè)置，比如關(guān)閉自動完成功能。然后我們在隨便搜索內(nèi)容來查看它的變化：

image

可以看到某些我們查詢的關(guān)鍵字，于是我們便發(fā)現(xiàn)了請求規(guī)律：

https://www.baidu.com/s?+查詢字符參數(shù)

這就構(gòu)成了我們的一個完整的get請求，而且這里面有很多關(guān)鍵字參數(shù)可以省略掉，只需要保留重要的一部分就好了。于是，經(jīng)試驗，得出如下結(jié)論：

https://www.baidu.com/s?wd=keyword

這個才是請求的接口地址，只需將keyword參數(shù)替換為任意搜索關(guān)鍵字即可實現(xiàn)查詢并跳轉(zhuǎn)到相應(yīng)結(jié)果頁面。

2.編寫Html輸入框，搜索按鈕

看過之前寫的Html系列的文章，你將不再對此感到困惑。

<html>
<head>
 <title></title>
 <style type="text/css">
    *{           內(nèi)外邊距初始時為0
       margin:0;    
       padding:0
    }
     input{
        width:300px;
        height:30px
    }
     span{
       position:absolute; 絕對定位
       background-color:red; 背景顏色
       border:1px solid gray; 邊框設(shè)置
       width:60px;
       height:32px;
       text-align:center 文字位置
    }
    span:hover{ 鼠標(biāo)懸停時的樣式
        background-color:blue
    }
 </style>
</head>
<body>
<input type="text" name="" placeholder="請輸入要搜索的內(nèi)容"> 文本框
<span>search</span> 搜索按鈕
</body>
</html>

編寫完成后進入瀏覽器查看，即可看到：

可以看到，已經(jīng)有點瀏覽器搜索框的意思了。

3.導(dǎo)入Jquery插件

<script src='jquery-3.2.1.min.js'></script>

4.編寫js腳本

這個是重中之重，打開瀏覽器，network,繼續(xù)分析：

可以看到搜索結(jié)果就在里面。然后打開這個請求的url地址，經(jīng)過多次實驗，發(fā)現(xiàn)就只有圖中標(biāo)記的參數(shù)有變化：

image.png

所以我們可以得出結(jié)論，我們只需要改變這兩個值即可。

1).創(chuàng)建刪除腳本

于是我先創(chuàng)建一個腳本標(biāo)簽，不用它的時候隨時可以清除，避免占用內(nèi)存，導(dǎo)致頁面打開遲緩，性能降低：

var script=document.createElement('script');  創(chuàng)建script的標(biāo)簽
script.id='jsonp';   設(shè)置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  設(shè)置它的地址
document.body.appendChild(script);   添加script元素到body中

然后等它不用了，隨時將它刪除：

var script=document.createElement('script');  創(chuàng)建script的標(biāo)簽
script.id='jsonp';   設(shè)置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd;  設(shè)置它的地址
document.body.appendChild(script);   添加script元素到body中

2).生成選項下拉菜單

我們在瀏覽器可以看到，只要一輸入文本，它就會彈出對應(yīng)的選項讓我們選擇，那么這是如何辦到的了？

<script>
function getlist(wd){    /*獲取下拉列表*/
   var script=document.createElement('script');  /*創(chuàng)建script的標(biāo)簽*/
   script.id='jsonp';   /*設(shè)置id為jsonp*/
   script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 設(shè)置它的地址*/
   document.body.appendChild(script);   /*添加script元素到body中*/
}
function getData(data){  /*獲取數(shù)據(jù)*/
     var script=document.querySelector('#jsonp'); /*選擇id為jsonp的元素*/
     script.parentNode.removeChild(script);  /*從這個元素的父元素中刪除這個元素*/
     $('ol').html('');  /* 設(shè)置有序列表的值為空*/
     var da=data.g;   /* 獲取搜索的結(jié)果*/
  if(da){                     /*結(jié)果存在的話就將結(jié)果放到li標(biāo)簽中*/
   da.forEach(function(item,index){  
     $('<li><a target="_blank" href ="https://www.baidu.com/s?wd='+item.q+'">'+item.q+'</a></li>').appendTo('ol');
    })
    }
}


     /* 判斷鍵盤是否按下*/
   $('input:text').keyup(function(){
      var wd=$(this).val();  /* 輸入框的值*/
      if(wd==''){           /*如果值是空，那么就隱藏，否則顯示*/
          $('ol').css('display','none');
          $('ol').css('zIndex',-10);  
      }else{
          $('ol').css('display','block');
       $('ol').css('zIndex',20);
      }
         getlist(wd);
  });
   </script>

可以看到，搜索結(jié)果已經(jīng)出來了，而且有序列表下的"li"標(biāo)簽也都對應(yīng)的生成了。

3).給選項標(biāo)記序列

我們可以看到，結(jié)果終于出來，但是我想給它個序列號，這樣就可以知道搜索結(jié)果有多少個了。要設(shè)置的標(biāo)記方式有很多種，可以以數(shù)字開頭，也可以是大小寫字母或者羅馬時間。在這里我選擇數(shù)字，很簡單。

終于非常完美的實現(xiàn)了這一功能，是不是很驚艷了，趕快去試下吧。

4).搜索刷新

看到這里相信大家應(yīng)該都知道這個功能已經(jīng)算是完成了，我們只需要隨便點擊哪個li標(biāo)簽都可以訪問到相應(yīng)的頁面。于是，我決定添加一個刷新的功能，屬于重連服務(wù)器的那種刷新：

<span onclick='window.location.reload()'>search</span> 點擊后立即刷新

【三、項目總結(jié)】

總的來說，對于初學(xué)者小白是個很不錯的練手項目，希望大家能從中有所收獲。

需要源碼的小伙伴，后臺回復(fù)“搜索引擎”四個字即可獲取。

****看完本文有收獲？請轉(zhuǎn)發(fā)分享給更多的人****

想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識，可前往專業(yè)網(wǎng)站：http://pdcfighting.com/

在線咨詢

上一篇：如何在互聯(lián)網(wǎng)放置 HTML 頁面
下一篇：HTML 文本格式化

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商