css實現網頁標準搜索框

天給大家帶來一種標準化的橢圓形的搜索框，話不多說，直接放圖。

我相信大家在很多網頁上一定見過這種搜索框，那么這種搜索框到底是怎么做的呢？不要著急，聽我慢慢給您講來。

我們會用到<input>標簽來構建最基本的搜索框架構，用到<a>標簽實現后面的搜全網的搜索按鈕。
具體的html的代碼很簡單。

<form class="message"><input type="text" name="sousuo" class="input" placeholder="冬瓜搜索"/> </form> <a href="#" class="search">搜全網</a>

3. 下來就是用css來美化它了。這里我們會用到boder元素。

4. 話不多說直接放代碼。

.message{position:absolute; left: 600px;top: 16px;} .input{width: 300px;height: 50px;font-size: 15px;padding-left: 20px;border: 1px solid #DCDCDC;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #F5F5F5;}.input:focus{border-color: #FA8072;outline: none;color: #FA8072; }.search{position:absolute; left: 900px;top: 15.5px;width: 90px;height: 49.3px;border: 1px solid #DCDCDC;border-top-right-radius: 25px;border-bottom-right-radius: 25px;font-size: 16px;text-align: center;line-height: 48px;color: #FFFFFF;background-color: #FA8072;text-decoration: none;}.search:hover{background-color: #F08080;}

5. 在css代碼中有一個關鍵的屬性，那就是border-top-left-radius和border-bottom-right-radius以及其他的相反方向。

小伙伴們看明白了嗎？快去動手試試吧。

言

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

【一、項目準備】

瀏覽器：360瀏覽器

編輯器：Sublime Text 3

插件：Jquery-3.2.1.Min.Js

【二、項目實現】

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

1.打開百度分析網頁結構

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

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

image

可以看到某些我們查詢的關鍵字，于是我們便發現了請求規律：

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

這就構成了我們的一個完整的get請求，而且這里面有很多關鍵字參數可以省略掉，只需要保留重要的一部分就好了。于是，經試驗，得出如下結論：

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

這個才是請求的接口地址，只需將keyword參數替換為任意搜索關鍵字即可實現查詢并跳轉到相應結果頁面。

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

看過之前寫的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>

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

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

3.導入Jquery插件

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

4.編寫js腳本

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

可以看到搜索結果就在里面。然后打開這個請求的url地址，經過多次實驗，發現就只有圖中標記的參數有變化：

image.png

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

1).創建刪除腳本

于是我先創建一個腳本標簽，不用它的時候隨時可以清除，避免占用內存，導致頁面打開遲緩，性能降低：

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中

2).生成選項下拉菜單

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

<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"標簽也都對應的生成了。

3).給選項標記序列

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

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

4).搜索刷新

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

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

【三、項目總結】

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

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

****看完本文有收獲？請轉發分享給更多的人****

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/

TML如何制作在透明輸入框里面添加圖標

最近在寫一個律師推薦前臺的網站，在上面搜索框這里出現了問題，我想把搜索的圖標放在搜索框里面，但是弄了半天都不大如意……

話不多說，我們直接進入主題：

基本思路

其實就把輸入框與后面的圖標一起放在一個div里面，然后將輸入框的border設置為0px，最后設置div的border為最終的外邊框

我們最直接上代碼：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="請輸入查找的律師或專長">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:這里是設置外面整個div的樣式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

這里是設置里面的輸入框的長寬、boder為0px、里面的字體大小、點擊不會亮邊框(outline:none)設置透明度這里使用rgba()，最后一個屬性就是透明度（在0-1之間）

在線咨詢

上一篇：5 種用 CSS 隱藏頁面元素的方法
下一篇：使用JavaScript寫爬蟲

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商