您好,登錄后才能下訂單哦!
這篇文章主要介紹“HTML搜索欄的代碼怎么寫”,在日常操作中,相信很多人在HTML搜索欄的代碼怎么寫問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對(duì)大家解答”HTML搜索欄的代碼怎么寫”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
實(shí)現(xiàn)效果
html代碼
<div class="container"> <form action="" class="parent"> <input type="text" class="search" placeholder="搜索"> <input type="button" name="" id="" class="btn"> </form> </div>
css代碼
* { margin: 0; padding: 0; } .container { height: 70px; width: 800px; margin: 100px auto 0 auto; } .parent { position: relative; } .search { width: 300px; height: 40px; border-radius: 18px; outline: none; border: 1px solid #ccc; padding-left: 20px; position: absolute; } .btn { height: 35px; width: 35px; position: absolute; background: url("images/topbar.png") no-repeat -2px -99px; top: 6px; left: 285px; border: none; outline: none; cursor: pointer; }
實(shí)現(xiàn)效果
html代碼
<div class="container"> <form action="" class="parent"> <input type="text"> <input type="button" value="百度一下"> </form> </div>
css代碼
重點(diǎn):
1.當(dāng)input框foucus時(shí),border顏色改變,而不是保留outline
2.button按鈕默認(rèn)box-sizing: border-box
.container { width: 500px; height: 50px; margin: 100px auto; } .parent { width: 100%; height: 42px; top: 4px; position: relative; } .parent>input:first-of-type { /*輸入框高度設(shè)置為40px, border占據(jù)2px,總高度為42px*/ width: 380px; height: 40px; border: 1px solid #ccc; font-size: 16px; outline: none; } .parent>input:first-of-type:focus { border: 1px solid #317ef3; padding-left: 10px; } .parent>input:last-of-type { /*button按鈕border并不占據(jù)外圍大小,設(shè)置高度42px*/ width: 100px; height: 44px; position: absolute; background: #317ef3; border: 1px solid #317ef3; color: #fff; font-size: 16px; outline: none; }
到此,關(guān)于“HTML搜索欄的代碼怎么寫”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。