CSS菜單是網頁設計中的重要組成部分,可以使用CSS實現菜單的不同樣式,比如鋪平式菜單。鋪平式菜單相較于傳統的垂直或水平式菜單更具有時尚感和現代感,非常適合用于響應式網頁設計中。下面介紹如何實現CSS菜單鋪平樣式。
/*HTML代碼*/ <ul class="menu"> <li><a href="#">首頁</a></li> <li><a href="#">新聞</a></li> <li><a href="#">關于我們</a> <ul> <li><a href="#">公司介紹</a></li> <li><a href="#">發展歷程</a></li> <li><a href="#">團隊風采</a></li> </ul> </li> <li><a href="#">服務</a></li> </ul> /*CSS代碼*/ .menu { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; background-color: #333; } .menu li { margin: 0.5em; flex-grow: 1; text-align: center; } .menu li a { display: block; padding: 0.5em; color: #fff; text-decoration: none; } .menu ul { margin: 0; padding: 0; list-style: none; position: absolute; z-index: 99; display: none; } .menu li:hover ul { display: block; } .menu ul li { margin: 0; background-color: #333; } .menu ul li a { display: block; padding: 0.5em; color: #fff; text-decoration: none; } .menu ul li:hover { background-color: #c00; }
首先,我們需要使用無序列表<ul>和列表項<li>來創建菜單。菜單樣式由CSS代碼實現。在CSS代碼中,我們在菜單上應用了flexbox布局,并使用了flex-wrap: wrap使菜單項自動換行。justify-content: center可以讓菜單項在父元素中居中對齊。我們還設置了菜單背景顏色為#333。
對于每一個菜單項,我們使用了margin來設置外邊距,flex-grow: 1使得菜單項在空間允許的情況下盡可能地自適應寬度。菜單項中的鏈接使用了display: block屬性來使得鏈接塊狀顯示,并設置了padding和顏色等屬性。
為了創建下拉式菜單,我們需要在"關于我們"這個菜單項中添加另一個無序列表。我們使用CSS的position: absolute屬性將下拉式菜單相對于父元素進行定位,display: none將其最初設為不可見,z-index屬性可以讓下拉式菜單浮在父元素之上。當我們將鼠標懸停在"關于我們"菜單項上時,下拉式菜單會出現。
最后,我們對下拉式菜單的樣式進行了設置,像菜單項一樣設置背景顏色和鏈接樣式。
通過以上CSS代碼,我們可以實現一個漂亮的并具有響應式設計的鋪平式菜單。
上一篇css 虛線產品導航
下一篇mysql匯總