整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文為大家介紹如何使用 CSS 創建一個帶搜索的導航欄。
以下實例均是響應式的。
可以先看下效果圖：
<div class="topnav">
<a class="active" href="#home">主頁</a>
<a href="#about">關于</a>
<a href="#contact">聯系我們</a>
<input type="text" placeholder="搜索..">
</div>
/* 在頂部導航欄中添加黑色背景顏色 */
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
ss3動畫實現搜索框另類的切換特效
效果圖：
未點擊搜索圖標前
點擊搜索圖標后會出現動畫過渡成圖中的展示效果
實現代碼：
html:
css:
js代碼：
在說這個之前，想必大家應該都比較了解搜索引擎了，它就是通過用戶在瀏覽器輸入框中輸入文本，從而顯示一些結果，你覺得哪項符合你要搜索的內容，你就點擊哪項。
瀏覽器：360瀏覽器
編輯器：Sublime Text 3
插件：Jquery-3.2.1.Min.Js
由于是要實現一個網頁搜索引擎，所以我們需要借用網頁三劍客（Html+Css+Javascript）,然后實現這一功能。
我們可以先看看百度的搜索引擎：
可以看到，這個搜索框的部分設置，比如關閉自動完成功能。然后我們在隨便搜索內容來查看它的變化：
image
可以看到某些我們查詢的關鍵字，于是我們便發現了請求規律：
https://www.baidu.com/s?+查詢字符參數這就構成了我們的一個完整的get請求，而且這里面有很多關鍵字參數可以省略掉，只需要保留重要的一部分就好了。于是，經試驗，得出如下結論：
https://www.baidu.com/s?wd=keyword這個才是請求的接口地址，只需將keyword參數替換為任意搜索關鍵字即可實現查詢并跳轉到相應結果頁面。
看過之前寫的Html系列的文章，你將不再對此感到困惑。
<html>
<head>
<title></title>
<style type="text/css">
*{ 內外邊距初始時為0
margin:0;
padding:0
}
input{
width:300px;
height:30px
}
span{
position:absolute; 絕對定位
background-color:red; 背景顏色
border:1px solid gray; 邊框設置
width:60px;
height:32px;
text-align:center 文字位置
}
span:hover{ 鼠標懸停時的樣式
background-color:blue
}
</style>
</head>
<body>
<input type="text" name="" placeholder="請輸入要搜索的內容"> 文本框
<span>search</span> 搜索按鈕
</body>
</html>編寫完成后進入瀏覽器查看，即可看到：
可以看到，已經有點瀏覽器搜索框的意思了。
<script src='jquery-3.2.1.min.js'></script>這個是重中之重，打開瀏覽器，network,繼續分析：
可以看到搜索結果就在里面。然后打開這個請求的url地址，經過多次實驗，發現就只有圖中標記的參數有變化：
image.png
所以我們可以得出結論，我們只需要改變這兩個值即可。
于是我先創建一個腳本標簽，不用它的時候隨時可以清除，避免占用內存，導致頁面打開遲緩，性能降低：
var script=document.createElement('script'); 創建script的標簽
script.id='jsonp'; 設置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 設置它的地址
document.body.appendChild(script); 添加script元素到body中然后等它不用了，隨時將它刪除：
var script=document.createElement('script'); 創建script的標簽
script.id='jsonp'; 設置id為jsonp
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; 設置它的地址
document.body.appendChild(script); 添加script元素到body中我們在瀏覽器可以看到，只要一輸入文本，它就會彈出對應的選項讓我們選擇，那么這是如何辦到的了？
<script>
function getlist(wd){ /*獲取下拉列表*/
var script=document.createElement('script'); /*創建script的標簽*/
script.id='jsonp'; /*設置id為jsonp*/
script.src='https://www.baidu.com/sugrec?prod=pc&cb=getData&wd='+wd; /* 設置它的地址*/
document.body.appendChild(script); /*添加script元素到body中*/
}
function getData(data){ /*獲取數據*/
var script=document.querySelector('#jsonp'); /*選擇id為jsonp的元素*/
script.parentNode.removeChild(script); /*從這個元素的父元素中刪除這個元素*/
$('ol').html(''); /* 設置有序列表的值為空*/
var da=data.g; /* 獲取搜索的結果*/
if(da){ /*結果存在的話就將結果放到li標簽中*/
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>可以看到，搜索結果已經出來了，而且有序列表下的"li"標簽也都對應的生成了。
我們可以看到，結果終于出來，但是我想給它個序列號，這樣就可以知道搜索結果有多少個了。要設置的標記方式有很多種，可以以數字開頭，也可以是大小寫字母或者羅馬時間。在這里我選擇數字，很簡單。
終于非常完美的實現了這一功能，是不是很驚艷了，趕快去試下吧。
看到這里相信大家應該都知道這個功能已經算是完成了，我們只需要隨便點擊哪個li標簽都可以訪問到相應的頁面。于是，我決定添加一個刷新的功能，屬于重連服務器的那種刷新：
<span onclick='window.location.reload()'>search</span> 點擊后立即刷新總的來說，對于初學者小白是個很不錯的練手項目，希望大家能從中有所收獲。
需要源碼的小伙伴，后臺回復“搜索引擎”四個字即可獲取。
****看完本文有收獲？請轉發分享給更多的人****
想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
