在構建網站時，導航欄是一個很重要的組成部分，而CSS則是我們實現導航欄設計的工具之一。DW導航CSS是一種基于CSS的樣式規則，它可以幫助我們快速地構建漂亮的導航欄。接下來，我們將介紹DW導航CSS的寫法。

.dw-nav {
display: flex; /* 將導航欄設置為彈性盒子布局 */
justify-content: space-between; /* 內容按照左右分布 */
align-items: center; /* 將內容垂直居中 */
background-color: #fff; /* 設置背景顏色 */
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1); /* 設置陰影效果 */
padding: 10px; /* 設置內邊距 */
}
.dw-nav ul {
list-style: none; /* 去除列表樣式 */
margin: 0; /* 去除外邊距 */
padding: 0; /* 去除內邊距 */
display: flex; /* 將 ul 標簽設置為彈性盒子布局 */
}
.dw-nav li {
margin-right: 20px; /* 設置每個菜單項之間的距離 */
}
.dw-nav a {
color: #333; /* 設置字體顏色 */
text-decoration: none; /* 去除下劃線 */
font-weight: 500; /* 設置字體加粗 */
text-transform: uppercase; /* 將字母轉化為大寫 */
transition: all .3s; /* 設置過渡效果 */
position: relative; /* 設置相對定位 */
}
.dw-nav a:hover::after {
content: ""; /* 添加偽元素 */
display: block; /* 將偽元素設置為塊元素 */
position: absolute; /* 設置絕對定位 */
bottom: -5px; /* 設置偽元素距離底部的距離 */
width: 100%; /* 設置偽元素寬度為 100% */
height: 2px; /* 設置偽元素高度為 2px */
background-color: #333; /* 設置偽元素顏色 */
}
.dw-nav a.active::after {
content: ""; /* 添加偽元素 */
display: block; /* 將偽元素設置為塊元素 */
position: absolute; /* 設置絕對定位 */
bottom: -5px; /* 設置偽元素距離底部的距離 */
width: 100%; /* 設置偽元素寬度為 100% */
height: 2px; /* 設置偽元素高度為 2px */
background-color: #0033cc; /* 設置偽元素顏色 */
}

以上就是DW導航CSS的寫法，我們可以按照這些規則來構建我們的導航欄。通過CSS的樣式控制，我們可以制作出漂亮、大氣的導航欄，讓用戶在查看我們的網站時感受到更好的視覺體驗。