今天我們來(lái)講一下側(cè)邊二級(jí)導(dǎo)航欄的CSS代碼。
首先,我們需要需要先定義一個(gè)具有固定寬度的側(cè)邊欄,以及一個(gè)由文章組成的主要內(nèi)容區(qū)域。然后,在側(cè)邊欄中定義一個(gè)ul元素作為導(dǎo)航菜單容器。
接下來(lái),我們定義菜單項(xiàng)的樣式。我們使用li元素作為菜單項(xiàng)容器,并為其設(shè)置樣式,包括背景顏色、邊框、尺寸和對(duì)齊方式。我們還要將其設(shè)置為相對(duì)定位,以便在菜單項(xiàng)下方展示子菜單。最后,我們?yōu)椴藛雾?xiàng)中的超鏈接設(shè)置樣式,包括字體、顏色和文本裝飾等。
最后,我們定義子菜單的樣式。我們給每個(gè)li元素添加一個(gè)子菜單ul元素,并將其設(shè)置為絕對(duì)定位。我們還為其設(shè)置樣式,包括背景顏色、邊框、尺寸和對(duì)齊方式。最后,為子菜單中的每個(gè)鏈接添加樣式。
下面是一個(gè)簡(jiǎn)單的側(cè)邊二級(jí)導(dǎo)航欄的CSS代碼示例:
.sidebar { position: fixed; top: 0; left: 0; width: 200px; height: 100%; background-color: #333; } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar li { position: relative; display: block; width: 100%; height: 40px; border-bottom: 1px solid #ddd; text-align: left; } .sidebar li a { display: block; font-size: 16px; line-height: 40px; text-decoration: none; color: #fff; padding-left: 20px; } .sidebar li ul { position: absolute; top: 40px; left: 0; width: 200px; background-color: #fff; border: 1px solid #ddd; display: none; } .sidebar li:hover ul { display: block; } .sidebar li ul li { display: block; width: 100%; height: 40px; border-bottom: 1px solid #ddd; text-align: left; } .sidebar li ul li a { display: block; font-size: 14px; line-height: 40px; text-decoration: none; color: #333; padding-left: 20px; }希望這個(gè)簡(jiǎn)單的例子能幫助你了解如何創(chuàng)建一個(gè)簡(jiǎn)單的側(cè)邊二級(jí)導(dǎo)航欄,以及一些CSS樣式的基礎(chǔ)知識(shí)。