CSS水平導航條是網頁設計中常見的布局方式，可以使網站頁面更美觀、易于使用。

首頁
產品
關于我們
聯系我們

代碼中，我們通過ul和li標簽來表示導航條，通過CSS中的display:flex來實現水平排列，justify-content:center和align-items:center來讓導航條在水平和垂直方向上都居中對齊。

通過對li和a標簽設置樣式，我們可以控制導航條每個元素的樣式，包括字號、顏色、邊距等。

最后，我們還添加了:hover偽類，讓鼠標懸停在導航條上時，字體顏色變成橙色，增加用戶交互性。