在網頁中,標題導航欄扮演著非常重要的角色。它通常位于頂部,并用于顯示網站的主要頁面或欄目。為了美化和定制化標題導航欄,我們可以使用CSS來實現。
/* 導航欄的基礎樣式 */ nav { background-color: #333; overflow: hidden; } /* 導航欄鏈接的樣式 */ nav a { float: left; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } /* 鼠標懸停樣式 */ nav a:hover { background-color: #ddd; color: black; } /* 當前頁面鏈接樣式 */ .active { background-color: #04AA6D; color: white; }
基礎樣式中,我們設置了導航欄的背景顏色和溢出隱藏屬性,以防止溢出。鏈接樣式中,我們給每個鏈接設置了左浮動、顏色、文本居中、內邊距和文本修飾。懸停樣式中,我們設置了鏈接背景和顏色在鼠標懸停的情況下的變化。當前頁面鏈接樣式中,我們設置了當前鏈接的背景和字體顏色。
總的來說,通過使用上述樣式,我們可以改變標題導航欄的外觀和行為。為了更好地控制和管理網站的導航欄,我們可以使用CSS框架或庫,如Bootstrap或Foundation。這些框架提供了可重用的樣式和組件,使快速創建具有吸引力的標題導航欄變得更加容易。
上一篇標題欄兩行css
下一篇html5七巧板代碼