導航欄和搜索框是網站中常見的元素，可以通過CSS進行樣式設計，使網站更加美觀和易于使用。本文將介紹導航欄和搜索框的CSS樣式設計，包括選擇器、布局和顏色方案等方面。

導航欄和搜索框的選擇器可以根據需要進行調整。導航欄的選擇器包括：

1. 類選擇器：導航欄可以使用類選擇器進行選擇，如導航欄、側邊欄等。

2. 屬性選擇器：導航欄可以使用屬性選擇器進行選擇，如width、height、background-color等。

3. ID選擇器：搜索框可以使用ID選擇器進行選擇，如搜索框、input等。

導航欄的布局可以根據需要進行調整。通常，導航欄采用垂直布局，可以使用以下樣式：

.nav {

display: flex;

justify-content: space-between;

align-items: center;

.nav li {

list-style: none;

display: inline-block;

margin: 0 2px;

.nav li a {

display: block;

text-align: center;

margin-bottom: 10px;

搜索框的布局可以使用以下樣式：

.search {

display: flex;

justify-content: center;

align-items: center;

padding: 10px;

background-color: #f1f1f1;

border: none;

border-radius: 5px;

input {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: none;

border-radius: 5px;

導航欄的顏色可以使用漸變或顏色選擇器進行設計。漸變色可以設計為一種平滑的過渡，例如：

.nav {

background-color: #66b5f5;

border-color: #99d6c1;

顏色選擇器可以設計為：

1. 類選擇器：導航欄可以使用類選擇器選擇一種顏色，如導航欄、側邊欄等。

2. 屬性選擇器：導航欄可以使用屬性選擇器選擇一種顏色，如width、height、background-color等。

3. ID選擇器：搜索框可以使用ID選擇器選擇一種顏色，如搜索框、input等。

在設計導航欄和搜索框時，可以根據需要選擇不同的樣式，使網站更加美觀和易于使用。