天給大家?guī)?lái)一種標(biāo)準(zhǔn)化的橢圓形的搜索框，話不多說(shuō)，直接放圖。

我相信大家在很多網(wǎng)頁(yè)上一定見過(guò)這種搜索框，那么這種搜索框到底是怎么做的呢？不要著急，聽我慢慢給您講來(lái)。

1. 我們會(huì)用到<input>標(biāo)簽來(lái)構(gòu)建最基本的搜索框架構(gòu)，用到<a>標(biāo)簽實(shí)現(xiàn)后面的搜全網(wǎng)的搜索按鈕。
2. 具體的html的代碼很簡(jiǎn)單。

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

3. 下來(lái)就是用css來(lái)美化它了。這里我們會(huì)用到boder元素。

4. 話不多說(shuō)直接放代碼。

.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代碼中有一個(gè)關(guān)鍵的屬性，那就是border-top-left-radius和border-bottom-right-radius以及其他的相反方向。

小伙伴們看明白了嗎？快去動(dòng)手試試吧。

文為大家介紹如何使用 CSS 創(chuàng)建一個(gè)帶搜索的導(dǎo)航欄。

以下實(shí)例均是響應(yīng)式的。

可以先看下效果圖：

創(chuàng)建一個(gè)搜索欄

HTML 代碼

<div class="topnav">

<a class="active" href="#home">主頁(yè)</a>

<a href="#about">關(guān)于</a>

<a href="#contact">聯(lián)系我們</a>

<input type="text" placeholder="搜索..">

</div>

CSS 代碼

/* 在頂部導(dǎo)航欄中添加黑色背景顏色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}