在網頁設計中，搜索框和導航欄是必不可少的元素，它們能夠有效地提高網站的用戶體驗。下面我們來看一下如何使用CSS來制作一款漂亮的搜索框和導航欄。

首先，讓我們先來看一下搜索框的實現。我們需要用到CSS中的盒模型和背景圖像。可以參考下面的代碼：

.search-box {
width: 300px;
height: 30px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
background-image: url(search-icon.png);
background-repeat: no-repeat;
background-position: left center;
padding-left: 25px;
}

在代碼中，我們先設置搜索框的寬度、高度以及背景顏色和邊框。然后再使用border-radius屬性讓邊框角變得圓潤。接著，我們使用背景圖像來顯示搜索圖標，并且使用background-repeat和background-position屬性來設置圖標的位置。最后，我們使用padding-left屬性來使輸入框內的內容不會被覆蓋。

接下來，我們來看一下如何制作導航欄。我們需要使用CSS中的flex布局和偽元素?？梢詤⒖枷旅娴拇a：

.nav-container {
display: flex;
justify-content: center;
align-items: center;
}
.nav-item {
position: relative;
margin: 0 10px;
}
.nav-item:hover::after {
content: "";
display: block;
position: absolute;
bottom: -10px;
left: 50%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
transform: translateX(-50%);
}

在代碼中，我們先將導航欄的容器設置為flex布局，并且使用justify-content和align-items屬性使導航項居中顯示。然后，在每一個導航項中，我們使用position:relative屬性讓偽元素的定位相對于導航項。接著，我們使用:hover偽類來為每個導航項的偽元素設置樣式。最后，在偽元素中使用border屬性設置三角形的樣式，并且使用transform屬性將三角形居中顯示。

通過以上的代碼，我們就可以輕松制作出漂亮的搜索框和導航欄。希望這篇文章能夠對您有所幫助！