CSS是一種用于改變HTML文檔樣式和布局的語言。在網(wǎng)站中加入搜索欄是很常見的，你可以使用CSS輕松地實現(xiàn)這個功能。

// html代碼
<div class="search-bar">
<input type="text" placeholder="搜索...">
<button>搜索</button>
</div>
// CSS代碼
.search-bar {
display: flex; // 將輸入框和按鈕放在一行上
align-items: center; // 垂直居中對齊
width: 300px; // 設(shè)置寬度
height: 50px; // 設(shè)置高度
border: 1px solid #ccc; // 邊框樣式
border-radius: 25px; // 圓角
padding: 5px; // 內(nèi)邊距
}
.search-bar input[type="text"] {
flex: 1; // 填滿父元素剩余空間
border: none; // 去掉邊框
outline: none; // 去掉外邊框
}
.search-bar button {
width: 80px; // 按鈕寬度
height: 40px; // 按鈕高度
background-color: #333; // 按鈕背景顏色
border: none; // 去掉邊框
color: #fff; // 文字顏色
border-radius: 20px; // 圓角
margin-left: 10px; // 按鈕和輸入框的間距
}
.search-bar button:hover {
cursor: pointer; // 鼠標(biāo)懸停手勢
background-color: #666; // 鼠標(biāo)懸停顏色
}

首先，在HTML中添加一個包含輸入框和按鈕的div元素，為其添加一個class屬性為search-bar。其次，在CSS中設(shè)置這個div元素的樣式，將其寬度、高度、邊框、圓角和內(nèi)邊距進(jìn)行設(shè)置。并通過flex布局將輸入框和按鈕排列在一行上。在輸入框的樣式中，通過設(shè)置flex屬性為1使其填滿父元素剩余空間，并去掉邊框和外邊框。在按鈕的樣式中，設(shè)置寬度、高度、背景顏色、邊框、圓角和左邊距。并添加:hover偽類使其在鼠標(biāo)懸停時具有不同的背景顏色和鼠標(biāo)懸停手勢。

這是一個簡單的搜索欄樣式，你可以通過修改CSS代碼來適應(yīng)你自己的網(wǎng)站需求。