p標簽開頭： 在網頁設計中，搜索欄是一個非常重要的功能，能夠方便用戶快速查找所需信息。本文將介紹如何使用CSS制作搜索欄代碼。 pre標簽：

/*
 * 設置搜索欄樣式
 */
.search-box {
display: inline-block;
padding: 5px;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-box input {
border: none;
outline: none;
background-color: transparent;
margin-left: 10px;
}
.search-box input:focus {
border: none;
outline: none;
}
.search-box button {
background-color: #007bff;
color: #fff;
border: none;
outline: none;
padding: 0 10px;
border-radius: 5px;
}
.search-box button:hover {
background-color: #0069d9;
}

p標簽結尾： 在代碼中，我們使用了搜索框主容器的class名為“search-box”，使用內聯塊級元素進行布局。我們設置了一些基本樣式，例如：背景顏色、邊框等。接下來，我們設置了輸入框和按鈕的樣式。這里有一個技巧，就是使用了“:focus”偽類，為用戶輸入時的狀態提供不同的樣式效果。最后，在按鈕上添加了鼠標懸停時的效果。這些樣式可以隨時根據需求進行更改。 通過本文的介紹，相信讀者已經掌握了使用CSS制作搜索欄代碼的方法。希望本文能夠對大家有所幫助。