使用html可以做出搜索框嗎-創(chuàng)新互聯(lián)

今天小編給大家分享的是使用html可以做出搜索框嗎，很多人都不太了解，今天小編為了讓大家更加了解html做出搜索框的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會(huì)有所收獲的哦。

創(chuàng)新互聯(lián)響應(yīng)式網(wǎng)站特點(diǎn)就是不管在電腦、平板還是手機(jī)上，成都h5網(wǎng)站建設(shè)都會(huì)根據(jù)屏幕尺寸自動(dòng)調(diào)節(jié)大小、圖片分辨率，并且融入一定的動(dòng)畫(huà)特效，讓網(wǎng)站看起來(lái)非常的美觀大方。從網(wǎng)站需求對(duì)接到網(wǎng)站制作設(shè)計(jì)、從代碼編寫(xiě)到項(xiàng)目上線(xiàn)運(yùn)維，技術(shù)人員全程跟蹤，快速響應(yīng)

使用html可以做出搜索框嗎

html搜索框怎么做

使用HTML做搜索框的方法：

1、首先新建一個(gè)div，id名為box，用來(lái)包裹搜索框；

2、然后在內(nèi)部添加一個(gè)input標(biāo)簽和一個(gè)div標(biāo)簽，一個(gè)用來(lái)輸入文字，一個(gè)充當(dāng)按鈕；

3、最后使用css為它們?cè)O(shè)計(jì)樣式即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</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="search" name="search" placeholder="請(qǐng)輸入關(guān)鍵字">
        <div id="search">搜索</div> 
    </div>
</body>
</html>

效果：

使用html可以做出搜索框嗎

關(guān)于使用html可以做出搜索框嗎就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過(guò)小編可以保證其準(zhǔn)確性是絕對(duì)沒(méi)問(wèn)題的。希望以上內(nèi)容可以對(duì)大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

文章標(biāo)題：使用html可以做出搜索框嗎-創(chuàng)新互聯(lián)
瀏覽路徑：http://www.rwnh.cn/article26/epgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、企業(yè)網(wǎng)站制作、網(wǎng)站排名、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

使用html可以做出搜索框嗎-創(chuàng)新互聯(lián)