CSS3做標題導航菜單是前端開發中常見的技巧之一。通過使用CSS3的眾多新特性和選擇器,我們可以創建出非常漂亮、功能強大的標題導航菜單。
/* HTML代碼 */ <nav class="menu"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">分類</a></li> <li><a href="#">關于我們</a></li> <li><a href="#">聯系我們</a></li> <li><a href="#">幫助中心</a></li> </ul> </nav> /* CSS3代碼 */ .menu { background-color: #333; } .menu ul { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; } .menu li { margin: 0; padding: 0; } .menu li a { display: block; padding: 20px 30px; color: #fff; text-decoration: none; transition: background-color 0.3s ease; } .menu li a:hover { background-color: #444; }
在上述代碼中,我們首先創建了一個nav元素,并使用class屬性設置了其樣式為menu。在nav元素中,我們創建了一個ul元素作為菜單項的容器,并使用flexbox實現居中對齊。而每個菜單項則是一個li元素,其中包含一個a元素作為鏈接。在樣式中,我們設置了菜單項的背景色和鏈接的顏色,并使用transition屬性實現鼠標懸停時顏色的漸變。最終,我們得到了一個簡潔、漂亮的標題導航菜單。
上一篇css設置圖片自適應li
下一篇css3 立體線框球