菜單樹(Menu Tree)是一種常見的網頁導航方式,通過垂直的層級結構來展現網站導航菜單,幫助用戶瀏覽網站頁面。
CSS是一種用來表現網頁樣式的標準語言,我們可以使用CSS來美化菜單樹的樣式,讓菜單樹看起來更加美觀、易于使用。
/* 菜單樹的樣式 */ .menu { list-style-type: none; margin: 0; padding: 0; } .menu li { position: relative; padding-left: 20px; margin-bottom: 10px; } .menu li:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: #c5c5c5; } .menu li:last-child:before { bottom: auto; height: 20px; } .menu li.active:before { background-color: #f00; } .menu a { color: #333; text-decoration: none; } .menu li.active a { color: #f00; font-weight: bold; }
通過以上CSS樣式,我們可以將菜單樹的每一個元素使用帶邊框的線條連接,同時設置了選中時的樣式,使用戶在瀏覽網頁時能夠清晰地看到自己的位置。
除此之外,我們還可以使用CSS來調整菜單樹的字體大小、背景顏色等等,從而滿足不同網站的需求。
下一篇菜單陰影css