導航條是網站中必不可少的元素之一,可以幫助用戶快速地瀏覽網站的不同部分。下面是一個基本的導航條樣式:
/* 導航條樣式 */ nav { background-color: #efefef; width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } /* 導航鏈接樣式 */ nav a { text-decoration: none; color: #333; margin: 0 20px; font-size: 16px; font-weight: bold; } /* 當前頁面鏈接樣式 */ nav a.current { color: blue; }
上述代碼中,我們定義了一個nav標簽作為導航條容器,設置其背景顏色、寬度、高度,并通過flex布局使其內部元素水平居中對齊。
接下來,我們定義了導航鏈接的樣式:去除下劃線、設置顏色、設置間距和字體大小等。同時,我們也定義了一個用于顯示當前頁面的鏈接樣式,讓用戶知道當前所在頁面。
通過這個示例代碼,我們可以快速地創建一個簡單的導航條并對其樣式進行調整。