CSS搜索框樣本是網(wǎng)頁設(shè)計中必不可少的元素，它能有效提高用戶體驗和頁面美觀度。在下面的代碼中，我們將看到如何使用CSS樣式來創(chuàng)建一個簡單但具有視覺吸引力的搜索框。

/* 定義搜索框的樣式 */
.search-box {
display: flex; /*將輸入框和按鈕橫向放置*/
max-width: 400px; /*最大寬度*/
margin: 0 auto; /*居中*/
}
.search-box input[type="text"] {
width: 100%; /*寬度100%*/
border: none; /*去掉邊框*/
font-size: 16px; /*字體大小*/
padding: 10px; /*內(nèi)邊距*/
background: #f2f2f2; /*背景色*/
border-radius: 5px 0 0 5px; /*邊框圓角*/
}
.search-box button {
border: none; /*去掉邊框*/
height: 43px; /*高度*/
width: 70px; /*寬度*/
background: #4c4c4c; /*背景色*/
color: #fff; /*字體顏色*/
border-radius: 0 5px 5px 0; /*邊框圓角*/
}
.search-box button:hover {
cursor: pointer; /*鼠標懸停時，將光標變?yōu)槭中?/
}

我們可以使用類名“search-box”將上述代碼應(yīng)用于我們的HTML代碼。在HTML代碼中，我們需要創(chuàng)建包含搜索框和按鈕的容器。我們可以這樣實現(xiàn)：

<div class="search-box">
<input type="text" placeholder="輸入關(guān)鍵詞...">
<button type="submit">搜索</button>
</div>

在這個例子中，我們使用了一個占位符文本“placeholder”，以提示用戶輸入關(guān)鍵詞。我們還添加了一個按鈕來啟動搜索操作。

上述CSS搜索框樣本將創(chuàng)建一個簡單但具有視覺吸引力的搜索框。然而，它只是一個示例，您可以使用不同的CSS樣式和屬性來創(chuàng)建您想要的搜索樣式。只需留意不要使其過于復(fù)雜或使用戶在使用時感到困惑。