唯品會是一家國內知名的電子商務平臺，它的導航欄是網站中最重要的功能之一。為了滿足品牌形象的要求和用戶體驗的需求，唯品會選擇了CSS來設計他們的導航欄。本文將介紹唯品會的導航欄是如何使用CSS來實現的。

.nav {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
background-color: #FFF;
border-bottom: solid 1px #e5e6e7;
}
.nav-logo {
margin-left: 50px;
font-size: 24px;
font-weight: bold;
}
.nav-list {
margin-right: 50px;
display: flex;
}
.nav-list li {
margin-left: 40px;
font-size: 14px;
color: #999;
cursor: pointer;
}
.nav-list li:hover {
color: #ff4062;
}
.nav-list .active {
color: #ff4062;
font-weight: bold;
}
.nav-search {
margin-right: 50px;
width: 350px;
height: 40px;
border-radius: 20px;
border: solid 1px #e5e6e7;
background-color: #f9f9f9;
padding: 0 20px;
display: flex;
align-items: center;
}
.nav-search input {
width: 100%;
border: none;
background-color: transparent;
font-size: 14px;
color: #999;
outline: none;
}
.nav-search button {
background-color: transparent;
border: none;
margin-left: 10px;
cursor: pointer;
}

以上是唯品會導航欄的CSS代碼。通過使用flex來對導航欄進行布局，設置padding和顏色來美化導航欄的樣式，使用hover來改變導航欄的字體顏色，使用button來設置搜索按鈕的樣式等，使唯品會的導航欄看起來簡潔美觀又實用。