在網(wǎng)站設(shè)計(jì)中，搜索框是一個(gè)非常重要的組件。在本教程中，我們將學(xué)習(xí)如何使用 CSS 制作一個(gè)簡(jiǎn)單但漂亮的搜索框。
首先，我們需要在 HTML 中創(chuàng)建一個(gè)搜索框的基本結(jié)構(gòu)。使用一個(gè) form 標(biāo)簽創(chuàng)建一個(gè)表單，然后在表單里面添加一個(gè) input 標(biāo)簽和一個(gè) button 標(biāo)簽。代碼如下所示：

html
<form>
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>

現(xiàn)在，我們來添加一些 CSS 樣式來美化搜索框。首先，讓我們?cè)O(shè)置輸入框和按鈕的樣式。在 CSS 中，我們可以使用 input[type="text"] 選擇器來選擇輸入框和 button[type="submit"] 選擇器來選擇按鈕。我們將它們放在一個(gè)類名為 search 的 div 中，代碼如下所示：

html
<div class="search">
<form>
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>

css
.search input[type="text"] {
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
width: 70%;
outline: none;
}
.search button[type="submit"] {
background-color: #007ad9;
color: #fff;
border-radius: 5px;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
}
.search button[type="submit"]:hover {
background-color: #0062ad;
}

這樣，我們的搜索框看上去已經(jīng)非常漂亮。但是，我們還可以添加一些動(dòng)畫和效果來提升用戶體驗(yàn)。下面是我們添加的一些效果：

css
.search input[type="text"] {
transition: width 0.4s ease-in-out;
}
.search input[type="text"]:focus {
width: 100%;
}
.search button[type="submit"] {
transition: background-color 0.4s ease-in-out;
}
.search button[type="submit"]:hover {
background-color: #0062ad;
transition: background-color 0.4s ease-in-out;
}

現(xiàn)在，搜索框變寬的動(dòng)畫效果將在用戶點(diǎn)擊搜索框時(shí)觸發(fā)，而按鈕背景顏色的變化效果將在用戶懸停在按鈕上時(shí)觸發(fā)。
這就是我們教程的全部?jī)?nèi)容了。你現(xiàn)在已經(jīng)學(xué)會(huì)如何使用 CSS 制作一個(gè)漂亮的搜索框。當(dāng)然，這只是入門級(jí)的內(nèi)容，還有很多可以優(yōu)化的地方。希望這篇文章對(duì)你有幫助！