CSS中nav li被用來定義導航菜單中的每個單個菜單項。通過使用nav li,開發人員可以輕松地定義和控制導航鏈接的樣式和排列方式。
nav { width: 100%; background-color: #333333; display: flex; justify-content: center; } nav ul { display: flex; justify-content: space-between; list-style-type: none; } nav li { padding: 10px; margin: 0 15px; color: #ffffff; font-size: 16px; text-transform: uppercase; text-align: center; border-radius: 5px; transition: background-color 0.3s ease-in-out; } nav li:hover { background-color: grey; }
上述CSS代碼包括了對nav、nav ul和nav li的定義。在定義導航菜單時,首先需要定義一個包含菜單項的無序列表。通過將所有列表項放在li標簽中,在CSS中定義nav li將逐一調用每個列表項,并為它們應用所需的樣式。
在以上樣式中,nav ul用于定義整個導航欄的樣式,包括菜單項的位置和列表樣式。接下來的nav li定義每個菜單項的樣式,包括內邊距、外邊距、文字顏色、字體大小、文本轉換以及懸停變化。通過為每個菜單項應用:hover選擇符,用戶可以在懸停在菜單項上時重新定義其背景顏色,以突出菜單項。
最后需要注意的一點是,通過在nav li選擇符后添加添加:nth-child(n)選擇符,用戶可以進一步定位和定義每個編號的菜單項,這對于需要查看和調整單個導航鏈接非常有用。
上一篇MySQL本地單機數據庫
下一篇mysql本周函數