搜索欄是許多網頁所需要的一個重要組件，使用HTML和CSS可以輕松地創建具有美觀效果的搜索欄。下面是一些可以幫助你創建搜索欄的HTML和CSS代碼：

<form class="search-form">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</form>

上面的代碼包含了一個簡單的搜索欄的HTML代碼。我們利用<form>標簽來創建搜索表單，包含一個文本框和一個提交按鈕。文本框使用了type="text"屬性，以便用戶只能輸入文本內容。placeholder屬性可以在文本框上顯示提示文本，用于提示用戶如何搜索。

CSS樣式可以幫助我們自定義搜索欄的外觀，代碼如下：

.search-form {
display: flex;
align-items: center;
margin: 0 auto;
max-width: 800px;
height: 50px;
border-radius: 25px;
background-color: #EEE;
overflow: hidden;
}
.search-form input[type="text"] {
font-size: 18px;
padding: 15px;
border: none;
flex: 1;
}
.search-form button[type="submit"] {
border: none;
background-color: #FF5062;
color: #FFF;
font-size: 20px;
padding: 0 25px;
height: 50px;
border-radius: 25px;
cursor: pointer;
}
.search-form button[type="submit"]:hover {
background-color: #ED3945;
}

樣式表中包含了對搜索欄的各個樣式的定義，比如搜索欄的寬度、高度、邊框顏色、背景顏色、字體大小等等。我們還使用了Flex布局來使表單元素垂直居中，并在搜索文本框和提交按鈕之間使用了Flex的方式平分空白區域。按鈕的顏色和字體也被定義，搜索按鈕在hover狀態下的顏色也被設置了。通過這種方式，我們可以輕松地創建一個漂亮而實用的搜索欄。