菜單是網(wǎng)頁設(shè)計(jì)中一個(gè)不可或缺的元素。可以使用CSS為菜單添加樣式,使之更加美觀。下面是一些常見的菜單樣式:
nav { background-color: #333; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; } nav a { color: white; text-decoration: none; display: block; padding: 10px; } nav a:hover { background-color: white; color: #333; }
上述代碼為菜單項(xiàng)添加了背景顏色和鼠標(biāo)懸停效果,同時(shí)設(shè)置了菜單項(xiàng)間的間距。
如果需要在菜單中添加下拉菜單,則可以使用CSS的偽類選擇器來實(shí)現(xiàn):
nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 10px; position: relative; } nav li ul { display: none; position: absolute; top: 30px; left: 0; background-color: #333; padding: 10px; } nav li:hover ul { display: block; } nav a { color: white; text-decoration: none; display: block; padding: 10px; } nav a:hover { background-color: white; color: #333; }
上述代碼為菜單項(xiàng)添加了下拉菜單效果。當(dāng)鼠標(biāo)懸停在菜單項(xiàng)上時(shí),下拉菜單會(huì)顯示出來。
除了上述介紹的菜單樣式外,還可以根據(jù)需要自定義菜單樣式。使用CSS可以為菜單添加各種效果,讓網(wǎng)頁看起來更加精美。
上一篇獲取css數(shù)值
下一篇mysql 磁盤