現在，搜索欄是網站中非常常見的元素之一。在這篇文章中，我們將學習如何使用css來創建一個簡單的搜索欄。以下是實現搜索欄的基本步驟：

/* 創建一個包含搜索欄的容器 */
.search-container {
margin: 0 auto;
width: 300px;
border: 1px solid #ddd;
border-radius: 5px;
}
/* 創建輸入框 */
.search-container input[type=text] {
width: 80%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
}
/* 創建搜索按鈕 */
.search-container button[type=submit] {
width: 20%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
}
/* 當鼠標懸停在搜索按鈕上時改變背景顏色 */
.search-container button:hover {
background-color: #45a049;
}

以上代碼為搜索欄的基本樣式，我們可以根據實際需求進行調整。

我們還可以使用一些其他的css技巧來增強搜索欄的樣式。例如：

/* 添加一個提示文本 */
input::placeholder {
color: #999;
}
/* 改變輸入框的外觀 */
input[type=text]:focus {
outline: none;
box-shadow: 0 0 10px #ccc;
}
/* 在搜索按鈕上添加圖標 */
button[type=submit]:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
margin-right: 5px;
}
/* 讓搜索欄能夠適應不同屏幕大小 */
@media (max-width: 768px) {
.search-container {
width: 100%;
}
}

以上代碼為搜索欄的一些常見樣式。通過使用css，我們可以很容易地創建一個漂亮的搜索欄。