在web開發中，對于大量數據的展示和搜索，通常需要使用分頁來減輕頁面加載的壓力，而在分頁中加入搜索功能也是很常見的需求。下面我們就來介紹一種使用CSS實現帶搜索的分頁效果。

.page {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.page li {
margin: 0 5px;
}
.page a {
color: #333;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color .3s ease;
}
.page a:hover {
background-color: #f3f3f3;
}
.page .active a {
background-color: #12a4ff;
color: #fff;
}
.search {
display: flex;
justify-content: center;
align-items: center;
}
.search input[type="text"] {
padding: 5px 10px;
border-radius: 5px 0 0 5px;
border: none;
outline: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.search button {
padding: 5px 10px;
border-radius: 0 5px 5px 0;
border: none;
outline: none;
background-color: #12a4ff;
color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color .3s ease;
}
.search button:hover {
background-color: #0c88e6;
}

首先，我們創建一個ul元素作為分頁的容器，并設置了一些基礎的樣式。然后，我們為每個分頁項(li元素)設置了一些間距樣式，并為a元素設置了基礎的樣式和hover樣式，以及active樣式表示當前分頁項。接下來是搜索框的樣式，我們使用flex布局對輸入框和按鈕進行居中，然后分別對輸入框和按鈕設置樣式，并通過hover和focus狀態下的背景色實現了交互效果。