如今，美團已成為國內最大的生活服務平臺之一，為數億用戶提供便捷的購物、餐飲、旅游、住宿等服務。而美團的頂部導航條設計，也成為了眾多網站模仿和學習的對象之一。

/* 仿美團頂部導航條 CSS */
/* 設置導航條的高度、背景色、字體樣式等 */
.header {
height: 60px;
background-color: #fb4545;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
/* 設置 logo 圖片的大小和位置 */
.logo {
width: 90px;
height: 30px;
margin-right: 40px;
cursor: pointer;
}
/* 設置搜索框的樣式 */
.search {
position: relative;
width: 340px;
height: 32px;
border-radius: 16px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.search input[type="text"] {
width: 250px;
height: 100%;
border: none;
background-color: transparent;
font-size: 14px;
padding: 0 10px;
color: #666;
}
.search button[type="submit"] {
width: 60px;
height: 100%;
border: none;
background-color: #fbbb3d;
color: #fff;
border-radius: 16px;
font-size: 14px;
cursor: pointer;
outline: none;
}
/* 設置導航欄的鏈接樣式 */
.nav-link {
color: #fff;
text-decoration: none;
margin: 0 20px;
transition: all 0.2s ease-in-out;
}
.nav-link:hover {
color: #fbbb3d;
}

通過上述 CSS 代碼仿制實現，我們可以輕松搭建出一套帶有搜索框、logo 和導航欄的頂部導航條，與美團相同或者近似的樣式風格，從而為自己的網站增色不少。同時，我們也可以根據自己的需求進行二次開發和個性化定制，使得設計更加符合用戶體驗和美感。