導航:首頁 > 萬維百科 > 網頁設計搜索框樣

網頁設計搜索框樣

 發布時間：2021-03-29 01:25:55

1、網頁設計 類似百度搜索頁面是怎麼做出來的

網頁設計這個一般都是要求會前端代碼，html css js flash 還有些其他的腳本插件什麼的。

如果代碼寫的熟練可以不用DW。寫網頁的工具很多，用txt文本文檔也可以。


好了，貼上搜索框代碼，使用需要後台程序支持，直接點了可是什麼都沒有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }
     
      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

2、網頁設計里這樣的搜索怎麼做？求大俠

其實很簡單 插入 表單 然後選擇你想要的表單即可

大體代碼是這樣的：
<form action="XXX.php" method="post" target="_blank" title="提示文字">
<input type="text" />
<input type="submit" value="提交" />
</form>

action是表示數據傳送到哪裡 method是傳送方式 target是打開方式 title是提示文字
還有一些其他的參數

然後就是第一個input就是前面的輸入框 第二個就是那個放大鏡區域(他加了圖片)
這2個框架可以用css樣式隨你控制背景顏色 背景圖片 高度 寬度等等

在DW裡面選擇表單應該也有一些選項
希望採納

3、網頁設計中，想用自己的圖片做背景來製作搜索框，怎麼弄？還有怎麼將原來的提交按鈕換成自己的搜索圖標？

<! html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> <!-- .aaa { background-image: url( http://cache.soso.com/wenwen/i/w_logo.png ); height: 30px; width: 200px; background-repeat: no-repeat; background-position: center; } .bbb{ height: 20px; width: 50px; } --> </style> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input name="aaa" type="text" class="aaa" id="aaa" /> </label> <label> <input name="Submit" type="image" class="bbb" value="提交" src=" http://cache.soso.com/wenwen/i/w_logo.png" /> </label> </form> </body> </html>

4、html製作一個搜索框，代碼是什麼？

1、打開Hbuilder編輯器，創建一個input框和button按鈕，將它們橫排擺放在一起：

2、首先給input框添加「#7FCC0B」顏色的邊框，設置寬度和高度即可，給button按鈕設置白色的字體和「#7FCC0B」的背景顏色即可完成：

3、按crtl+s，在軟體的右側即可看到最終的效果。以上就是用html製作搜索框的演示：

5、html中搜索框怎麼做？

<input type="text" class="aa"><input type="button" value="搜索" class="bb">

6、html中的搜索框怎麼做

我自己簡單做了一個，因為上傳圖片麻煩，所以圖中的圖片我直接用文字代替，弄個背景就，代碼如下：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8">
 <meta name="author" content="blog.anchen8.net">
 <title>無標題 1</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .search{
        margin: 30px;
        width: 210px;
        height:35px;
        border:1px solid silver ;
    }
    .search_key{
        width: 150px;
        height: 25px;
        border: none;
        margin-top: 5px; 
        margin-left: 5px;     
    }
    .submit{
        background:none;
        margin-top: 5px;
        width:40px;
        height: 25px;
        border: none;
/*這個添加背景圖即可*/ 
    }
    </style>
</head>
<body>
<form action="" method="post">
    <div class="search">
        <input type="text" class="search_key" value="站內搜索" />
        <input type="submit" class="submit" value="搜索">
    </div>
</form>
</body>
</html>

 效果如下：

7、網頁設計中如何做一個好看的搜索框

通過from表單，將查詢的關鍵詞，通過 like 跟數據進行模糊查詢對比
從topics表中查詢欄位subject與傳進來的參數'$_POST['topic']進行比較模糊查詢
設subject欄位數據為：數學，英語，物理，化學，英文
$subject=$_POST['topic'];
$sql = "select * from topics where subject like '%" .$subject. "%'";
$result = mysql_query($sql);
若從表單提交的『topic』值為「學」，得到的結果將是：數學，化學
多個欄位匹配查詢：
$sql = "select id,subject from topics where (id like '%" .$id. "%') or (name like '%" .$name. "%') or (subject like '%" .$subject. "%') order by id desc";

8、網站設計中搜索框的設計技巧有哪些

設計精美的網站當然很吸引人，但如果你的網站設計精美，內容上乘，就是不明白網站為何沒達到運營預期目標，問題可能就出在搜素框這一元素的運用之上。本文指出了設計者必須避免的錯誤，並分享了一些搜索框設計技巧，希望在優化網站性能方面有所幫助。

在瀏覽整個網站中，搜索框通常是通向用戶使用的最後一道關卡。如果你的網站內容很多，包含了詳盡的特色，功能，設計元素，產品和服務等等，那麼搜索框就成為了網站不可或缺的一部分。網站的成長往往需要時間。當然，從整個網站設計和開發過程來看，設計肯定要簡潔，有文章和評論，以及非正式的網站通知，特色內容和服務等等。不過，隨著網站層次不斷提升和更新，與網站相關的內容的只是起到了裝飾作用。因此，搜索框對網站的性能優化起到了至關重要的作用。

優質的職能和運作對網站開發確實很重要，但與此同時，我們也不可忽視網站的前端性能。你的網站也許在特色內容，功能以及內容質量等方面都很出眾，但是，如果網站前端性能令人不滿意，並且沒有以用戶為中心，那麼網站其它方面做得再好，也起不到任何作用。

錯誤觀念：搜索框不需要設計

在整個網站設計中，搜索框的外觀要顯眼，方便用戶快速找到。網站站長普遍認為搜索框只是一個輸入和提交內容的按鈕而已，因此他們根本不需要花時間設計。

但是由於錯誤觀念泛濫，站長們也錯失了一些潛在的機會。由於設計上的缺失以及亮點不突出，用戶通常會被搜索框的位置弄得焦頭爛額，他們通常會點擊「返回」按鈕（離開網頁）。因此，設計平庸，辨識度不高的搜索框就是導致這一切的元兇，如果想要網站獲得可觀的流量，但是網站轉化率卻低得離譜，這是不行的。

如果用戶對你的網站感到失望，搜索框則有助於留住用戶。在大量的網站中，真正帶給用戶絕佳體驗的少之又少，用戶有時還沒深入了解整個網站，可能就不斷點擊後退，離開網頁了。如果用戶能進行搜索，他們只需在搜索框中輸入自己想找的內容，上述問題也就迎刃而解了。

在如今這個快速成功的社會，時間就是金錢。搜索框不僅能幫助用戶節約時間，還可帶給用戶高度愉悅和簡潔的瀏覽體驗。

搜索框設計技巧

在為網站設計搜索框時，你可重點考慮以下建議：

1. 搜索框要顯眼

搜索框要清晰可見，千萬不可放在難以注意到的位置。即使你的網站主題是純白色，為搜索框設置黑色的邊框，選用紅色等亮色作為字體顏色，這都可能會解決搜索框不明顯的問題。

2. 搜索框要有搜索框的樣

你可以嘗試在搜索框設計中融入創意，但是不要把它弄得不倫不類。這也是搜索框必須是框狀的原因。訪問網站的用戶不會仔細瀏覽完整個網站的內容，他們只會關注自己感興趣的內容，而且許多學習條件是受制於他們的行為，在用搜索框進行搜索時，實際上用圓角矩形的搜索框就可以了。

3. 搜索框的位置

搜索框的位置對網站優化和性能提升十分重要。一般的經驗表明搜索框的最佳位置應在網站頂部的左上角或右上角，因為用戶希望節約時間和精力，直接搜索到他們所需的內容。但是受廣告等內容的影響，迫使設計者將搜索框放在頁面底部。這並沒真正解決搜索框在網站中的實用性問題，必須避免。

另外，在每個網頁中都放入搜索框是一個明智的主意，即使用戶在網站中迷失，他們也能夠方便地找到需要的內容。

4. 為提交按鈕取一個有創意的名字

搜索框的名字要取得有創意，不要簡單地放上單調的「go」，「find」或「search」在旁邊。不管給它起什麼名字，只要不為難用戶去猜意思就好。

5. 為用戶提供分類搜索

用戶可自由搜索各種分類。同樣的思路，你也可以顯示分類，用戶在輸入區域進行搜索。在JavaScript的幫助下，用戶只需將滑鼠懸停在搜索框上，即可顯示類型或進行用戶自定義搜索，從用戶的角度講，這是一個很棒的選擇。

設計者必須避免的錯誤

我們在試用其它網站的搜索時發現他們在搜索框的顯示上犯了不少錯。這些都是些很常見的錯誤，如果你希望通過搜索框優化網站性能，那麼就必須得避免這些問題。

1. 隱藏搜索框

我們反復強調搜索框的明確顯示的必要性。不要把搜索框放在網站底部，放在網站的右上角效果會更好，如果網站設計得很混亂，用戶在沒有瀏覽到接近網站的底部時就已經離開網頁了。

2. 切忌輸入區域過短

為用戶提供所需范圍准確的輸入查詢。搜索框輸入區域太短只會讓用戶對搜索框感到失望，因為，他們不會在整個區域輸入想查詢的內容。再者，這也非常不方便用戶閱讀和回應。

3. 切忌提交按鈕過短

受網站設計限制，提交按鈕不應過長，但是太短又會讓用戶感到失望，因為他們在滑鼠點擊的准確性上又會有偏差，從而浪費搜索時間，還會被轉入到到一些不同頁面上。

4. 切勿將搜索框與其它菜單混排在一起

如果把搜索框和與新聞和導航條混排在一起，這是相當讓人不爽的事。這樣用戶很難在郵件訂閱或文章搜索欄中區分出搜索框。因此，搜索框應與其它菜單分開排列。

5. 過度設計搜索框

不要因為搜索框要顯眼，在設計時就受到影響。雖然搜索框要清晰地展現出來，但也不要設計過度，以免影響到它的直觀性。

6. 沒必要提供高級搜索工具

高級搜索當然會有它的用處，但這會使本來簡單的搜索變得更加復雜。因此，沒必要提供高級搜索工具，除非你是為了迎合懂技術的用戶。如果你只是搞定一般用戶，盡量保持搜索選項簡單。

7. 一個搜索框有多個提交按鈕

這條建議非常有意思，我們很少看到有網站設置了多個搜索提交按鈕，比如同時有「go」和「find」。很明顯，這會擾亂按鈕的選擇。

8. 如果在網站設計中，你遵從了以上建議，我們相信一個高效的搜索框能夠起到優化網站性能的作用。

9、html中搜索框怎麼做

.aa{width:100px; height:20px; boder:solid 1px #f00;}//定義搜索框的大小高度以及邊框顏色。

思路是：
放大鏡圖標用個img寫進來或者用其它回標簽用CSS做背景也可以；
下拉導航答這種效果系統的Select下拉是最容易想到的，但是別想著用它做，，原因很簡單，做不到的，，這個必須藉助JS輔助來解決！

與網頁設計搜索框樣相關的知識