CSS盒子模型是在網頁設計中應用廣泛的概念，它可以幫助我們更好地控制網頁的布局和排版。在本文中，我們將介紹如何使用CSS盒子模型來創建一個簡單的豎直導航條。

<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品中心</a></li>
<li><a href="#">聯系我們</a></li>
</ul>
</nav>

我們首先創建一個nav標簽，它代表整個導航條。接著在nav標簽內部創建一個ul標簽，它將包含我們的所有導航鏈接。在ul標簽內部，我們使用四個li標簽分別代表不同的導航選項。每個li標簽中都包含了一個a標簽，該標簽鏈接到對應頁面的URL。

nav {
background: #333;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li {
margin: 0;
padding: 8px 12px;
border-bottom: 1px solid #666;
}
nav li:last-child {
border: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #fff;
background: #666;
}

現在我們來應用CSS樣式來美化我們的導航條。我們首先給nav標簽添加一個灰色背景色。接著，我們將ul標簽的樣式設置成了無序列表，去除了默認的列表樣式，并將內邊距和外邊距都設置成了0。而我們為li標簽設置的樣式包括了邊距、內邊距和底部邊框，并使用了偽類選擇器: last-child去掉了最后一個li標簽的底部邊框。我們使用了兩個a標簽選擇器，一個用于設置鏈接的顏色和文本修飾（如下劃線），另一個用于在鼠標懸浮時添加背景色，以提供更好的用戶體驗。

綜上所述，通過運用CSS盒子模型的概念和相關樣式，我們已成功地創建了一個簡單的豎直導航條。雖然這只是一個入門級的示例，但是在實際的網站開發中，我們可以根據需要使用更復雜的樣式和技術，來實現更具有創意和實用價值的導航條。