最近，在設計網站的時候，我發現了一些非常實用的導航欄 CSS 模板，這些模板具有美觀、實用、簡單易操作等特點，相信對于前端工程師來說是非常有幫助的。下面，我將介紹其中一些模板的使用方法。

/*模板1*/
.navbar {
background: #333;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.navbar a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
margin-right: 20px;
}
.navbar ul {
display: flex;
list-style: none;
}
.navbar li {
margin-right: 20px;
}
/*模板2*/
.navbar {
background: #f2f2f2;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.navbar a {
color: #333;
text-decoration: none;
font-size: 1.5rem;
margin-right: 30px;
font-weight: bold;
}
.navbar ul {
display: flex;
list-style: none;
}
.navbar li {
margin-right: 30px;
}
/*模板3*/
.navbar {
background: #222;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.navbar a.logo {
color: #fff;
text-decoration: none;
font-size: 2rem;
margin-right: 30px;
}
.navbar ul {
display: flex;
list-style: none;
}
.navbar li {
margin-right: 30px;
}
.navbar a {
color: #fff;
text-decoration: none;
font-size: 1.2rem;
}

以上三種模板分別在布局、顏色、字體等方面有些許不同，使用時可以根據自己的需求進行適當的調整。如果想要更多樣式和效果的導航欄，可以在網上搜索一些優秀的前端開發資源，應該會有不少的收獲。