在網頁設計中，導航條是很重要的一個部分。CSS可以幫助我們簡單而又美觀地創建導航條，同時還能夠添加用戶信息，如用戶頭像和昵稱，提升用戶體驗。

.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f2f2f2;
padding: 10px;
}
.profile {
display: flex;
align-items: center;
}
.profile img {
border-radius: 50%;
width: 30px;
height: 30px;
margin-right: 10px;
}
.profile span {
font-weight: bold;
}

以上代碼展示了一個簡單的導航條，并添加了用戶信息。首先我們用flex布局讓導航條中的內容靠左和靠右分別對齊。然后設置了一個背景色和padding來美化導航條。接著創建了一個.profile類，用于包裹用戶頭像和昵稱，通過display和align-items屬性來讓這兩個元素垂直居中顯示。用戶頭像通過設置圓角和寬高來進行美化，昵稱通過設置粗體字體來強調。最后在導航條中加入類名為.profile的元素，就可以在導航條中添加用戶信息了。

通過CSS，我們可以輕松地創建出美觀且實用的導航條，并添加用戶信息，提升網站的用戶體驗。