您好,登錄后才能下訂單哦!
這篇文章主要介紹了html搜索框如何設(shè)置,具有一定借鑒價值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
首先我們來設(shè)置一個簡單的搜索框:
<input type="text" class="aa"><input type="button" value="搜索" class="bb">
這是一個最簡單樣式的搜索框,沒有很復(fù)雜的樣式。如果需要設(shè)計樣式可以根據(jù)class="aa"來寫樣式,.aa{}在括號中添加代碼即可,當(dāng)然這是框的樣式,按鈕的樣式.bb{}在括號中填寫代碼即可。
這就是一個簡單的搜索框的代碼。
現(xiàn)在說說input標(biāo)簽的使用方法,先看個實例
我們來看點更高深的搜索框完整的代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>億速云</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> #box{ width: 380px; margin: 30px auto; font-family: 'Microsoft YaHei'; font-size: 14px; } input{ width: 260px; border: 1px solid #e2e2e2; height: 30px; float: left; background-image: url(images/search.jpg); background-repeat: no-repeat; background-size: 25px; background-position:5px center; padding:0 0 0 40px; } #search{ width: 78px; height: 32px; float: right; background: black; color: white; text-align: center; line-height: 32px; cursor: pointer; } </style> </head> <body> <div id="box"> <input type="text" name="search" placeholder="請輸入關(guān)鍵字"> <div id="search">搜索</div> </div> </body> </html>
這個代碼看效果圖:
這個效果就比第一個好看太多了,就是多了點代碼,都是基礎(chǔ)的css樣式的知識,如果有不懂的可以在下方留言。
注意: <input> 元素是空的,它只包含標(biāo)簽屬性。
提示: 你可以使用 <label> 元素來定義 <input> 元素的標(biāo)注。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享html搜索框如何設(shè)置內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。