CSS布局導航是網頁中的重要組成部分。它能夠讓用戶更快速地找到所需的信息和資源。下面介紹一些布局導航的常見樣式及實現方法。

/* 水平導航樣式 */
nav {
display: flex; /* 使用flex布局 */
justify-content: space-between; /* 將導航項均勻分布 */
align-items: center; /* 讓導航項垂直居中 */
}
nav ul {
display: flex; /* 將導航項水平排列 */
list-style: none; /* 去除自帶的bullets */
}
nav li {
position: relative; /* 讓下拉菜單絕對定位 */
}
nav a {
display: block; /* 將a標簽變為塊級元素 */
padding: 10px; /* 增加導航項的填充 */
text-decoration: none; /* 去掉鏈接下劃線 */
}
nav a:hover {
background-color: #ddd; /* 鼠標滑過時的背景色 */
}
nav ul ul {
display: none; /* 隱藏子菜單 */
position: absolute; /* 絕對定位 */
top: 100%; /* 定位到父菜單的底部 */
left: 0;
}
nav ul li:hover >ul {
display: block; /* 當父菜單被鼠標滑過時顯示子菜單 */
}
/* 垂直導航樣式 */
nav.vertical {
display: flex; /* 使用flex布局 */
flex-direction: column; /* 豎向排列 */
}
nav.vertical ul {
display: flex; /* 將導航項水平排列 */
flex-direction: column; /* 豎向排列 */
list-style: none; /* 去除自帶的bullets */
}
/* 屏幕小于600px時，使導航項豎向展示 */
@media screen and (max-width: 600px) {
nav ul {
flex-direction: column;
}
}

以上樣式可以用于制作水平導航和垂直導航，其中下拉菜單使用絕對定位實現。在屏幕尺寸小于600px時，可以使用媒體查詢將水平導航轉變為垂直導航，提高移動端用戶的體驗。當然，這只是樣式的基礎用法，我們可以根據需求靈活調整其樣式。